ES6 화살표 함수에서 이것이 가리키는 곳은 어디입니까?

이번에는 ES6 화살표 함수에서 이것이 가리키는 부분과 ES6 화살표 함수에서 이것을 사용할 때 주의사항이 무엇인지 보여드리겠습니다.

간단한 소개: 화살표 함수의 This는 일반 함수와 다르게 정의된 함수를 가리킵니다. 화살표 함수의 this는 함수를 실행할 때가 아니라 함수를 정의할 때에 바인딩됩니다. 틀림없이.

(1) 이것이 가리키는 일반 함수는 실행 중에 바인딩됩니다. obj.say()를 실행할 때 이것은 obj 객체를 가리킵니다.

var x=11;
var obj={
 x:22,
 say:function(){
 console.log(this.x)
 }
}
obj.say();
//console.log输出的是22

(2) 소위 정의 시 바인딩은 이것이 상위 실행 컨텍스트에서 상속된다는 의미입니다! ! 여기의 This.x는 실제로 window.x를 나타내므로 출력은 11입니다.

var x=11;
var obj={
 x:22,
 say:()=>{
 console.log(this.x);
 }
}
obj.say();
//输出的值为11

비슷한 것들은 다음과 같습니다:

(3)

var a=11
function test1(){
 this.a=22;
 let b=function(){
 console.log(this.a);
 };
 b();
}
var x=new test1();

Output 11

Arrow 함수 상황:

var a=11;
function test2(){
 this.a=22;
 let b=()=>{console.log(this.a)}
 b();
}
var x=new test2();
//输出22

이상하죠? ES6에서 정의할 때 이것을 바인딩하는 구체적인 의미는 다음과 같습니다. 상속되어야 하는 것은 상위 실행 컨텍스트가 아닌 상위 실행 컨텍스트에서입니다! ! ! 이러한 방식으로 화살표 함수의 불분명한 방향이 많이 해결됩니다.

참고: 단순 개체(비함수)에는 실행 컨텍스트가 없습니다!

화살표 함수에서 이에 대한 심층적인 이해

화살표 함수에서 이 점을 고정하는 것은 이것을 화살표 함수 내부에 묶는 메커니즘이 있기 때문이 아닙니다. 실제 이유는 화살표 함수 때문입니다. 결과적으로 내부 this는 외부 코드 블록의 this입니다. 정확하게는 이것이 없기 때문에

생성자로 사용할 수 없습니다.

ES5에서 화살표 함수 변환을 시뮬레이션할 수 있습니다.

// ES6
function foo() {
 setTimeout(() => {
 console.log('id:', this.id);
 }, 100);
}
// ES5
function foo() {
 var _this = this;
 setTimeout(function () {
 console.log('id:', _this.id);
 }, 100);
}

따라서 객체를 정의할 때 객체 속성을 정의하세요. 이 내부는 일반적으로 객체가 있는 환경에서 전역 세계를 가리킵니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS를 사용하여 라디오 상태를 변경하는 방법

부트스트랩 테이블을 높이 백분율로 설정하는 방법

var foo = function() {}과 function foo의 차이점 ()

위 내용은 ES6 화살표 함수에서 이것이 가리키는 곳은 어디입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!