ES6 화살표 함수에 대해 질문이 있으신가요?

화살표 함수 구문은 ES6에서 새로 추가되었습니다. 화살표 함수는 이를 얻기 위한 단순성과 편리함의 특징을 가지고 있습니다. 다음으로 관심 있는 친구들은 이 기사를 통해 이를 공유하겠습니다. together

간단한 소개: 화살표 함수의 this는 일반 함수와 다르게 정의된 함수를 가리킵니다. 화살표 함수의 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

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);
}

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

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 글:

React 컴포넌트 성능 최적화에 대한 자세한 설명

vue의 element-ui가 테이블에서 롤링 로딩 방식을 구현하는 방법에 대해

선택 드롭다운 목록을 구현하는 방법 Vue.js, 구체적인 동작은 다음과 같습니다

위 내용은 ES6 화살표 함수에 대해 질문이 있으신가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!