[자바스크립트] ES6에서의 this 바인딩

먼저 ES6 이전에 this 바인딩이 어떻게 되는지 한번 보자 만약 자세한 내용을 알고 싶다면? 호출 패턴과 this바인딩

var value = 0
var obj = {
  value: 1,
  setValue: function () {
    this.value = 2;		// this -> obj
    (function () {
      this.value = 3	// this -> window
    })();
  }
}
obj.setValue()
console.log(value)		// 출력 3
console.log(obj.value)	// 출력 2

위와 같이 obj() 안에 프로퍼티로 setvalue 메서드를 선언하면 this는 obj가 된다. 그렇다면 그 메서드 안에서 즉시 실행 함수를 정의하면 this는 어떻게 될까? 바로 window를 바라보게 된다 즉! 전역 변수를 업데이트하게 되고 console.log(value)의 값이 3이 나오는 것이다. 

그러면! 여기서 어떻게 즉시 실행 함수에서도 똑같은 obj를 접근할 수 있게 할까?

var value = 0
var obj = {
  value: 1,
  setValue: function () {
    var self = this
    self.value = 2;
    (function () {
      self.value = 3
    })()
  }
}
obj.setValue()
console.log(value)
console.log(obj.value)

대표적으로 위와 같이 선언하여 this에 접근할 수 있다.

이제 ES6로 넘어와서는 어떻게 사용할까

let value = 0
let obj = {
  value : 1,
  setValue : function () {
    this.value = 2
    {
      this.value = 3
    }
  }
}
obj.setValue()
console.log(value)
console.log(obj.value)

스코프를 만들고 싶지만? 스코프 안에 동일하게 this를 사용하고 싶다면 블록 스코프를 사용하면 된다. 블록 스코프는 this의 영향을 받지 않는다.

 

출처

• developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this