집 > 기사 > 웹 프론트엔드 > ES6 화살표 함수에서 이것을 사용하는 방법

ES6 화살표 함수에서 이것을 사용하는 방법

php中世界最好的语言원래의: 2018-02-27 09:34:281587검색

이번에는 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=11function test1(){  this.a=22;  let b=function(){
    console.log(this.a);
  };
  b();
}var x=new test1();
输出11

화살표 함수 상황:

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

이상하네요. ES6에서 정의한 this의 구체적인 의미는 상속되어야 합니다. 상위 실행 컨텍스트는 상위 실행 컨텍스트가 아니어야 합니다! ! ! 이러한 방식으로 화살표 함수의 불분명한 방향이 많이 해결됩니다.

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

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

화살표 함수에서 이 점을 고정하는 것은 화살표 함수 내부에 이것을 묶는 메커니즘이 있기 때문이 아닙니다. 실제 이유는 화살표 함수에 자체적인 것이 없기 때문입니다. 내부 this가 외부 코드 블록의 This가 되도록 합니다. 바로 이것이 없기 때문에 생성자로 사용할 수 없습니다.

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

// ES6function foo() {
  setTimeout(() => {    console.log(&#39;id:&#39;, this.id);
  }, 100);
}
// ES5function foo() {  var _this = this;  setTimeout(function () {    console.log(&#39;id:&#39;, _this.id);
  }, 100);
}

따라서 객체를 정의할 때 객체 property를 정의하세요. 그리고 이 내부는 일반적으로 전역 세계를 가리키거나 객체가 위치한 환경을 가리킵니다.

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