ES6 화살표 함수의 'this' 키워드에 어휘 바인딩이 어떤 영향을 미치나요?

ES6 화살표 함수에서 "this"의 어휘 바인딩 이해

JavaScript 영역에서 화살표 함수는 "this"가 어떻게에 미묘하지만 영향력 있는 변화를 가져옵니다. 키워드가 작동합니다. 전통적인 함수 선언과 달리 화살표 함수는 해당 범위 내에서 "this"의 값을 제어하는 ​​개념인 어휘 바인딩을 나타냅니다.

어휘 바인딩이란 무엇입니까?

어휘 바인딩 "this"의 값이 함수가 정의된 범위인 함수의 어휘 환경에 의해 결정되는 메커니즘을 나타냅니다. 이와 대조적으로 기존 함수는 함수가 외부 범위 내에 정의된 경우에도 "this"의 값이 호출자 컨텍스트에 의해 결정되는 동적 바인딩을 사용합니다.

Arrow 함수의 의미

화살표 함수는 어휘적으로 바인딩됩니다. 즉, 주변 컨텍스트에서 "this" 값을 상속받습니다. 간단히 말해서 화살표 함수 내의 "this"는 항상 화살표 함수 정의가 포함된 개체를 참조합니다.

예

다음 코드 조각을 고려하세요.

var testFunction = () => {
  console.log(this)
};
testFunction();

이 예에서 화살표 함수 안의 "this"는 전역 개체(브라우저의 창)를 나타냅니다. 이는 화살표 함수가 전역 범위 내에서 정의되고 해당 범위의 "this" 값을 상속하기 때문입니다.

기존 함수와의 대조

기존 함수 선언, on 반면에 동적 바인딩을 사용하십시오. 기존 함수가 개체 내에 정의된 경우 "this"는 호출 컨텍스트에 관계없이 함수가 호출될 때 해당 개체를 참조합니다.

예를 들어 다음 코드 조각은 동적 바인딩을 보여줍니다.

var person = {
  name: 'John',
  greet: function() {
    console.log(this.name)
  }
};
person.greet(); // logs 'John'

반대로, Greeting 메소드에 화살표 함수를 사용한다면:

var person = {
  name: 'John',
  greet: () => {
    console.log(this.name)
  }
};
person.greet(); // logs undefined

화살표 함수는 어휘적이기 때문에 바운드, "this"는 person 개체가 아닌 전역 개체를 참조하므로 정의되지 않은 출력이 발생합니다.

어휘 바인딩의 응용

"this"의 어휘 바인딩 화살표 함수에는 특히 비동기 작업 및 이벤트 처리에 중요한 의미가 있습니다. 화살표 함수는 주변 컨텍스트에서 "this" 값을 상속함으로써 메소드 호출 및 이벤트 콜백에 대해 올바른 객체가 유지되도록 보장합니다.

위 내용은 ES6 화살표 함수의 'this' 키워드에 어휘 바인딩이 어떤 영향을 미치나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!