ES6 Arrow Functions에 대한 이 질문에 답하세요.

화살표 함수의 This는 일반 함수와 다르게 정의된 함수를 가리킵니다. 화살표 함수의 this는 함수가 실행될 때가 아니라 함수가 정의될 ​​때 묶입니다.

(1) 일반적으로 this가 가리키는 함수는 실행 중에 바인딩됩니다. 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

화살표 기능 상황:

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

제가 이해한 방식은 다음과 같습니다. ES6 this의 구체적인 의미를 바인딩할 때 상속해야 하는 것은 부모 실행 컨텍스트에서 this이며 부모 실행 컨텍스트가 아니어야 합니다! ! ! 이러한 방식으로 화살표 함수의 불분명한 방향이 많이 해결됩니다.

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

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

화살표 함수에서 이 점을 고정하는 것은 이것을 화살표 함수 내부에 묶는 메커니즘이 있기 때문이 아닙니다. 실제 이유는 화살표 함수 때문입니다. 결과적으로 내부 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);
}

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

관련 추천:

ReactJs의 화살표 함수 사용 분석

JavaScript 화살표 함수 사용법 소개

JavaScript의 일반 함수와 화살표 함수의 차이점과 사용법을 설명하는 코드 예제

위 내용은 ES6 Arrow Functions에 대한 이 질문에 답하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!