일반 함수의 this, bind()와 화살표 함수의 this 비교

1. JavaScript에서의 this

JavaScript에서 함수의 this키워드는 다른 언어와 조금 다르게 동작합니다.
일반 함수의 this는 함수를 호출한 방법이 결정합니다. (동적 스코프 = Dynamic scope)
ES5에서 함수를 어떻게 호출했는지 상관하지 않고 this값을 설정할 수 있는 bind 메서드가 도입됐습니다.
ES6에서는 this 바인딩을 제공하지 않는 화살표 함수를 추가됐습니다.

화살표 함수에서 this는 항상 상위 스코프의 this를 가리킵니다. (정적 스코프 = Lexical scope = Static scope)

 

 

2. 일반 함수의 this

var person = {
  age: 27,
  getAge: function() {
    console.log(this); //{age: 27, getAge: ƒ}
    setTimeout(function() {
    	console.log(this); //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    }, 1000)
  }
}

person.getAge();

6번 라인의 this도 person을 가리킬 것 같지만 콜백 함수 내부의 this는 전역 객체 Window를 가리킵니다.

 

 

3. 일반 함수의 bind

var person = {
  age: 27,
  getAge: function() {
    console.log(this); //{age: 27, getAge: ƒ}
    setTimeout(function() {
    	console.log(this); //{age: 27, getAge: ƒ}
    }.bind(this), 1000)
  }
}

person.getAge();

6번 라인의 this가 person을 가리키게 하려면 7번 라인에서 this를 바인드시켜야 합니다.

이때 바인드 되는 this는 setTimeout함수 밖에 있으므로 4번 라인의 this와 동일합니다.

 

 

4. 화살표 함수의 this

var person = {
  age: 27,
  getAge: () => {
    console.log(this); //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    setTimeout(() => {
    	console.log(this); //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    }, 1000)
  }
}

person.getAge();

화살표 함수에서는 this 바인딩을 제공하지 않으므로

4번 라인의 this와 6번 라인의 this가 모두 전역 객체 Window를 가리킵니다.

 

var person = {
  age: 27,
  getAge: function() {
    console.log(this); //{age: 27, getAge: ƒ}
    setTimeout(() => {
    	console.log(this); //{age: 27, getAge: ƒ}
    }, 1000)
  }
}

person.getAge();

화살표 함수의 this는 항상 상위 스코프의 this를 가리키므로 6번 라인의 this는 4번 라인의 this와 동일합니다.

 

 

5. 참고 자료

this

Function.prototype.bind()

화살표 함수