es6 화살표 방법에서 이것이 무엇을 가리키는가?

ES6에서 화살표 함수 본문의 this 객체는 함수가 정의된 범위가 가리키는 객체입니다. 화살표 함수에서 this의 포인트는 컨텍스트 개체가 없는 경우 창을 가리킵니다. 호출, 적용, 바인딩 및 기타 메서드에서도 this의 포인트를 변경할 수 없습니다. 화살표 기능.

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

화살표 함수는 매우 간결하고 가독성이 높기 때문에 일상적인 개발에서 여러 곳에서 사용된다고 생각합니다. 하지만 실제로 가장 큰 이점은 익명 함수를 가리키는 문제를 해결하고 콜백 함수를 캡슐화하는 데 도움이 된다는 것입니다.

먼저 요약하자면:

화살표 함수 본문에 있는 this 객체는 함수가 정의된 범위가 가리키는 객체이지, 사용되는 범위가 가리키는 객체가 아닙니다.

ES6 화살표 함수에서 this

• (1)은 정의될 때 컨텍스트에 있는 객체의 this 지점을 기본값으로 사용합니다. 즉, ES6 화살표 함수에서 this의 포인트는 컨텍스트 내 객체의 포인트가 되는 경우가 가끔 있는데, context 객체가 없으면 this는 window

• 를 가리킨다. (2) 호출, 적용, 바인딩까지. 다른 메소드는 화살표 함수의 this 지점을 변경할 수 없습니다

다음은 일반적인 함수의 예입니다.

var name = 'window'; // 其实是window.name = 'window'

var A = {
   name: 'A',
   sayHello: function(){
      console.log(this.name)
   }
}

A.sayHello();// 输出A

var B = {
  name: 'B'
}

A.sayHello.call(B);//输出B

A.sayHello.call();//不传参数指向全局window对象，输出window.name也就是window

위에서 볼 수 있듯이 A 객체에 sayHello 메소드가 정의되어 있습니다. 호출 메소드를 사용하여 B 객체를 가리키고 마지막으로 B를 출력하면 sayHello의 this는 사용될 때만 객체와 관련이 있다는 결론을 내릴 수 있습니다.

수정:

var name = 'window'; 
var A = {
   name: 'A',
   sayHello: () => {
      console.log(this.name)
   }
}
A.sayHello();// 还是以为输出A ? 错啦，其实输出的是window

Hello는 A에 바인딩되어 있지만 실제로는 window에 바인딩되어 있다고 생각하여 대부분의 학생들이 여기서 실수를 할 것이라고 생각합니다.

처음에는 "이 함수의 범위가 가리키는 객체"에 중점을 두었습니다. 범위는 함수 내부를 의미하며, sayHello라는 함수의 범위는 실제로 가장 바깥쪽의 js 환경입니다. . 래핑된 다른 함수가 없고 가장 바깥쪽 js 환경이 가리키는 객체는 winodw 객체이므로 여기서는 window 객체를 가리킵니다.

A를 영원히 바인딩하도록 변경하는 방법:

var name = 'window'; 

var A = {
   name: 'A',
   sayHello: function(){
      var s = () => console.log(this.name)
      return s//返回箭头函数s
   }
}

var sayHello = A.sayHello();
sayHello();// 输出A 

var B = {
   name: 'B';
}

sayHello.call(B); //还是A
sayHello.call(); //还是A

좋아요, 이렇게 하면 항상 A 개체를 가리킵니다. "함수가 위치한 범위에서 가리키는 개체"를 기준으로 분석해 보겠습니다.

• This 함수가 위치한 범위: 화살표 함수 s가 위치한 범위는 sayHello입니다. 왜냐하면 sayHello는 함수이기 때문입니다.

• 스코프가 가리키는 객체: A. sayHello가 가리키는 객체는 A입니다.

그래서 화살표 함수 s에서 이것은 A~~

---finish---------------

마지막으로 화살표 함수를 사용할 때 주의해야 할 몇 가지 사항이 있습니다. 즉, 생성자로 사용할 수 없습니다. 즉, new 명령을 사용할 수 없습니다. 그렇지 않으면 오류가 발생합니다.

• 함수 본문에 존재하지 않는 인수 개체를 사용할 수 없습니다. 이를 사용하려면 대신 나머지 매개변수를 사용할 수 있습니다.

• yield 명령을 사용할 수 없으므로 화살표 함수를 제너레이터 함수로 사용할 수 없습니다.

• 【추천 학습:

  javascript 비디오 튜토리얼
】

위 내용은 es6 화살표 방법에서 이것이 무엇을 가리키는가?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!