es6 화살표 함수를 사용할 때 주의해야 할 점은 무엇인가요?

참고: 1. 화살표 함수는 함수 내 this의 지점을 상위 범위의 this 지점과 일치하도록 변경합니다. 2. 생성자로 사용할 수 없습니다. 즉, 새 명령을 사용할 수 없습니다. ; 3. 인수 개체는 사용할 수 없습니다. ;4. 항복 명령은 사용할 수 없으며 생성기 함수로 사용할 수 없습니다.

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

es6의 새로운 구문에는 화살표 함수가 나타납니다.

ES6에서는 "화살표"(=>)를 사용하여 함수를 정의할 수 있습니다.

		function fun(a){ return a; }
// ↓ 去掉 function 在 ( ) 和 { } 之间添加 => 
		var fun = (a) => { return a; }  
// ↓ 如果只有一个形参可省略 ( ) 如果一个形参都没有，必须加( )         
		var fun = a => { return a; }  
// ↓ 如果函数体只有一句话，可省略{ }，如果仅有的这句话还是 return， 则必须省略 return         
		var fun = a => a

ES6의 화살표 함수에 대한 참고 사항

(1) 화살표 함수는 함수 내 this의 지점을 상위 범위의 this 지점과 일치하도록 변경합니다.

함수 본문의 this 객체는 다음과 같습니다. 그것이 사용되는 객체가 아니라 정의된 객체입니다.

(2)는 생성자로 사용할 수 없습니다. 즉, 새 명령을 사용할 수 없습니다. 그렇지 않으면 오류가 발생합니다.

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

(4) 항복 명령을 사용할 수 없으므로 화살표 기능을 제너레이터 기능으로 사용할 수 없습니다.

위의 네 가지 사항 중 첫 번째 사항이 특히 주목할 만합니다. 이 객체의 포인터는 가변적이지만 화살표 함수에서는 고정되어 있습니다.

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

위 코드에서 setTimeout의 매개변수는 화살표 함수입니다. 이 화살표 함수의 정의는 foo 함수가 생성될 때 적용되며 실제 실행은 100밀리초 이후까지 기다리지 않습니다. 일반 함수라면 실행 시 전역 개체 창을 가리켜야 하며 이때 21이 출력되어야 합니다. 그러나 화살표 함수를 사용하면 함수 정의가 적용되는 객체(이 경우 {id: 42})를 항상 가리키므로 출력은 42입니다.
화살표 함수를 사용하면 setTimeout에서 이것이 실행되는 범위를 가리키는 대신 정의된 범위에 바인딩될 수 있습니다. 여기 또 다른 예가 있습니다.

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0

위 코드에서는 Timer 함수 내부에 각각 화살표 함수와 일반 함수를 사용하여 두 개의 타이머가 설정되어 있습니다. 전자의 this 바인딩은 범위(예: Timer 함수)에 정의되고 후자의 this 바인딩은 실행되는 범위(예: 전역 객체)를 가리킵니다. 따라서 3100밀리초 후에는 타이머.s1이 세 번 업데이트되었지만, 타이머.s2는 한 번도 업데이트되지 않았습니다.

화살표 함수를 사용하면 이 문제를 해결할 수 있습니다. 이 기능은 콜백 함수를 캡슐화하는 데 매우 유용합니다. 다음은 DOM 이벤트의 콜백 함수가 객체에 캡슐화되는 예입니다.

var handler = {
  id: '123456',

  init: function() {
    document.addEventListener('click',
      event => this.doSomething(event.type), false);
  },

  doSomething: function(type) {
    console.log('Handling ' + type  + ' for ' + this.id);
  }
};

위 코드의 init 메소드에는 화살표 함수가 사용되는데, 이는 화살표 함수에서 이 함수가 항상 핸들러 객체를 가리키도록 합니다. 그렇지 않으면 콜백 함수가 실행될 때 this.doSomething 줄이 오류를 보고합니다. 이는 현재 문서 객체를 가리키기 때문입니다.

이 포인팅이 고정되는 것은 화살표 함수 내부에 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);
}

위 코드에서 변환된 ES5 버전은 화살표 함수가 자체 this를 전혀 갖지 않고 외부 this를 참조한다는 것을 명확하게 보여줍니다.

【관련 추천: javascript 비디오 튜토리얼, web front-end】

위 내용은 es6 화살표 함수를 사용할 때 주의해야 할 점은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!