this뿐만 아니라 arguments, super or new.target도 Binding하지 않습니다.
function vs Arrow function
ES5 function
중첩된 구조에서는 각각의 dynamic scope가 모두 발생합니다.
dynamic scope this를 가지고 있습니다.
function Person() { this.age = 0; // `this`를 자신의 인스턴스로 정의. setInterval(function growUp() { // 비엄격 모드에서, growUp() 함수는 `this`를 전역 객체로 정의 // 이는 Person() 생성자에 정의된 `this`와 다릅니다. // 따라서 외부 age, 내부 age는 다른 Reference를 가지고 있습니다. this.age++; // dynamic scope # this console.log(this.age); // NaN }, 1000);}var p = new Person();
ES5에서 외부/내부 this값이 다른 문제점을 해결하기 위해 어떤 노력을 했을까?
function Person() { var that = this; that.age = 0; // 비전역 변수 할당하여 접근 setInterval(function growUp() { // 콜백은 `that` 변수를 참조하고 이것은 값이 기대한 객체이다. that.age++; console.log(that.age); // 1, 2, 3, 4, ... }, 1000);}var p = new Person();
ES6 Arrow function
lexical scope this를 가지고 있습니다.
function Person(){ this.age = 0; setInterval(() => { this.age++; // lexical scope # this console.log(this.age); // 1, 2, 3, 4, ... }, 1000);}var p = new Person();
Arrow function Case
교체하기 쉬운 경우
this나 arguments를 사용하지 않는 경우
.bind(this)를 사용하는 경우
교체하기 힘든 경우
new등을 사용하는 constructable한 함수
prototype에 덧붙여진 함수나 method들(보통 this를 사용합니다.)
this, arguments, super, new.target등을 함수의 인자로 사용하는 경우
