'this' 키워드는 기존 함수와 비교하여 ES6 화살표 함수에서 어떻게 다르게 동작합니까?

화살표 함수와 이것

ES6에서 화살표 함수는 함수 정의를 위한 간결한 구문을 제공합니다. 그러나 해당 동작은 this 키워드를 처리하는 방식에서 기존 함수와 다릅니다.

다음 코드를 고려하세요.

var person = {
  name: "jason",
  shout: () => console.log("my name is ", this.name) // Error: This is unbound
};

person.shout();

여기서 의도는 다음과 같은 경우 "my name is jason"을 기록하는 것입니다. person.shout()이 호출됩니다. 그러나 출력은 "내 이름이 정의되지 않았습니다"입니다. 화살표 함수에는 자체 this 바인딩이 없기 때문입니다. 대신, 바깥쪽 범위에서 this 값을 상속합니다.

이 경우 바깥쪽 범위는 전역 범위이며 this는 창 개체를 참조합니다. window 객체에는 name 속성이 없으므로 this.name 표현식은 정의되지 않은 것으로 평가됩니다.

이 문제를 해결하려면 화살표 함수가 this를 바인딩하지 않는다는 사실을 활용할 수 있습니다. 객체 리터럴 내부에 화살표 함수를 직접 배치하면 객체에서 올바른 this 값을 상속받을 수 있습니다.

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

person.shout(); // Output: my name is jason

또는 function 키워드 및 구문 없이 ES6 메서드 선언을 사용할 수 있습니다.

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

person.shout(); // Output: my name is jason

이러한 기술을 활용하면 화살표 기능 내에서 이를 효과적으로 활용하여 원하는 출력을 얻을 수 있습니다.

위 내용은 'this' 키워드는 기존 함수와 비교하여 ES6 화살표 함수에서 어떻게 다르게 동작합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!