[JavaScript] This 포인터 이해하기

This 포인터

앞서 This 포인터가 포함된 실행 Context와 Scope에 대해 알아보았다. This로 특정 위치를 참조 할 수 있다. 클래스 내부를 참조할 때 this를 함께 사용함을 본적이 있을 것이다. 또, 일반 함수형과 화살표 함수의 큰 차이점이 바로 이 this 포인터이다.

 

function myFunc(){
	console.log("myFunc called");
}

myFunc(); //함수 직접 호출

const o ={
    name : 'Daniel',
    printName : function(){
   		console.log(this.name)}
}

o.printName(); //객체릐 메서드를 호출

function Person(name){
    this.name = name
    this.printName = function() {
    console.log(this.name)}
}

const p = new Person('Daniel') //생성자 호출

setTimeout(p.printName.bind(p), 1000)

일반함수에서 this는 호출한 곳을 가리키며 default(일반적인 사용)는 window(global)이다. 

객체가 가진 함수를 호출하는 경우에는 객체 자체가 this가 되며(왼쪽 코드 참고), setTimeout과 같은 글로벌 함수 내부에서 호출하는 경우에는 this가 글로벌 스코프가 기본으로 가리키는 window를 가리킨다. 하지만 bind, call, apply를 사용하면 this가 객체를 가리키도록 동적 바인딩 할 수 있다.(오른쪽 코드 참고)

 

Bind 사

위의 예제에서 글로벌 함수에서 객체의 내부 함수를 호출 했을 때, bind를 하지않는 경우 변수를 찾지 못해 undefined를 출력함을 볼 수 있다.

 

화살표 함수와 일반 함수의 this

화살표 함수의 This는 함수가 선언되는 곳의 부모 컨텍스트를 가리킨다. 또한, bind와 같은 동적 바인딩이 불가능 하다. 위의 예제를 통해 화살표 함수와 일반 함수의 차이를 이해할 수 있을 것이다. 화살표 함수 f1은 let o의 내부에 선언이 되어있고, let o의 부모 컨텍스트는 global이고 this가 가리키는 것이 된다. 반면 일반함수 f2는 호출하는 곳에 따라 this가 달라지며, 객체를 통해 호출 했기때문에 this는 객체 o 그 자체가 된다.

 

조금 다른 예제로 다시 설명하자면, 화살표 함수 f2는 method()내에 선언되어 있고 이 것의 부모 컨텍스트는 const o이다. 따라서 f2의 this는 const o를 가리킨다. 반면, f1()과 같은 일반적인 호출에서는 바인딩된 컨텍스트가 없으므로 default 값인 global을 가리킨다.

 

 

객체 내부의 this

const Something = function(element) {
  this.name = 'Something Good';
  this.handleEvent = function(event) {
    console.log(this.name); // 'Something Good'
    switch(event.type) {
      case 'click':
		...
        break;
      case 'dblclick':
		...
        break;
    }
  };

  element.addEventListener('click', this, false);
  element.addEventListener('dblclick', this, false);
  
  element.removeEventListener('click', this, false);
  element.removeEventListener('dblclick', this, false);
}
const s = new Something(document.body);

Class 혹은 객체에서 this를 addEventListener의 callback으로 주게되면 class내부의 handleEvent 함수를 실행하게 된다.

혹은 객체명["onclick"]() 과 같이 호출할 수도 있다. this.handleEvent로 호출하지 않도록 하자.