Arrow 함수는 JavaScript에서 `this` 키워드를 어떻게 처리합니까?

화살표 함수와 'this'

ES6에서 화살표 함수는 메소드 정의에 대한 새로운 접근 방식을 도입합니다. 그러나 'this' 키워드에 액세스할 때 화살표 함수와 기존 함수 사이에는 눈에 띄는 차이가 있습니다.

문제:

다음 코드를 고려하세요.

var person = {
  name: "jason",

  shout: () => console.log("my name is ", this.name)
}

person.shout() // Should print out my name is jason

의도된 결과는 "my name is jason"을 인쇄하는 것이지만 콘솔에서는 "my name is jason"만 출력합니다. 이다." 이는 화살표 함수가 'this' 바인딩 측면에서 기존 함수와 다르게 동작하기 때문입니다.

설명:

기존 함수와 달리 화살표 함수는 ' this' 키워드를 포함 범위에 추가합니다. 대신, 주변 컨텍스트에서 'this' 바인딩을 상속합니다. 위의 예에서 화살표 함수의 'this'는 'person' 객체가 아닌 전역 객체를 참조합니다.

해결책:

여러 가지가 있습니다. 이 문제를 해결하는 방법:

1. 경계 사용 기능:

// Bind 'this' to the 'person' object
var shoutBound = function() { console.log("my name is ", this.name); }.bind(person);

// Assign the bound function to the 'shout' property
person.shout = shoutBound;

2. 기존 기능 사용:

// Define a traditional function with 'this' bound to 'person'
person.shout = function() { console.log("my name is ", this.name); };

3. 사용 ES6 방법 선언:

// ES6 method declaration implicitly binds 'this' to the object
person = {
  name: "jason",

  shout() {
    console.log("my name is ", this.name);
  }
};

'this' 바인딩과 관련된 화살표 함수의 다양한 동작을 이해하면 ES6에서 효과적이고 유연한 코드를 작성할 수 있습니다.

위 내용은 Arrow 함수는 JavaScript에서 `this` 키워드를 어떻게 처리합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!