ES6 화살표 함수에서 `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"만 인쇄됩니다. 이 문제는 화살표 함수의 고유한 동작에서 비롯됩니다.

화살표 함수에는 바인딩된 this, 인수 또는 기타 특수 이름이 없습니다. 객체가 생성되면 객체 내부가 아닌 둘러싸는 범위에 위치합니다. 이러한 변형의 코드를 검토하면 문제가 더욱 분명해집니다.

var person = {
  name: "Jason"
};
person.shout = () => console.log("Hi, my name is", this);

그리고 ES5의 화살표 구문에 대한 모호한 근사치로 변환하면 다음과 같습니다.

var person = {
  name: "Jason"
};
var shout = function() {
  console.log("Hi, my name is", this.name);
}.bind(this);
person.shout = shout;

두 경우 모두에서 , 이것은 소리 지르기 기능에 대한 것이 개체가 추가될 때 개체와 관련된 새 범위가 아니라 사람이 정의된 범위를 가리킵니다. person.

화살표 함수는 의도한 동작을 복제할 수 없지만 ES6은 공간을 절약하기 위해 메소드 선언 패턴을 활용하여 대체 솔루션을 제공합니다.

var person = {
  name: "Jason",
  // ES6 "method" declaration - leaving off the ":" and the "function"
  shout() {
    console.log("Hi, my name is", this.name);
  }
};

위 내용은 ES6 화살표 함수에서 `this`가 예상대로 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!