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

ES6 화살표 함수의 "this" 어휘 바인딩

ES6의 화살표 함수는 "this"의 독특한 어휘 바인딩 동작으로 유명합니다. " "this"가 동적으로 바인딩되는 다른 JavaScript 함수와 달리 화살표 함수는 "this"를 바깥쪽 컨텍스트와 동일한 값에 할당하여 어휘 범위를 유지합니다.

이 개념을 설명하려면 다음 코드를 고려하세요.

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

"this"가 전역 객체(창)를 참조하는 전통적인 JavaScript 동작과 달리 화살표 함수는 둘러싸는 컨텍스트의 "this" 값을 캡처합니다. 이 예에서 testFunction은 객체 외부에서 정의되므로 "this"는 전역 범위(창)를 참조합니다.

게다가 어휘 바인딩은 "this"가 화살표 함수의 수명 전체에 걸쳐 일관성을 유지하도록 보장합니다. 다음 예를 고려하십시오.

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the person object
  }, 1000);
}

var p = new Person();

여기서 화살표 함수는 Person 객체의 "this" 값을 캡처하여 해당 속성에 액세스하고 수정할 수 있도록 합니다(이 경우 age 속성을 증가시킵니다). 이 동작은 화살표 함수가 호출되거나 실행 컨텍스트가 변경되는 방식에 관계없이 "this"가 항상 올바른 컨텍스트를 참조하도록 보장합니다.

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