목표

  • this의 개념을 이해한다.
  • 함수내부에서 this의 동작 원리를 이해한다.
  • 메서드 내부에서 this의 동작 원리를 이해한다.
  • 콜백 함수 내부에서 this의 동작 원리를 이해한다.
  • 생성자 내부에서 this의 동작 원리를 이해한다.

this 이해하기

  • this는 어디서든 사용될 수 있다.
  • this는 실행 컨텍스트가 생성 될때 함께 결정된다.

크롬 개발자 도구(F12)에서 this를 입력해보자. 결과로 window객체가 나온다. this를 입력 할 때 전역 실행 컨텍스트가 생성되면서 전역 객체를 바라보게된다.

브라우저에서의 전역 객체는 `window`  
Node.js에서의 전역 객체는 `global`

함수 내부에서 this의 동작

  • 함수 내부에서 this는 전역 객체로 결정된다.
  • Douglas Crockford는 이를 명백한 설계상의 오류라고 한다.
var outer = function () {
    var inner = function() {    
        console.log('inner' + this);
    }
    console.log('outer' + this);
    inner();
} 
outer();
  1. 먼저 전역 컨텍스트가 생성이되고 outer()함수를 실행한다.
  2. outer() 실행 컨텍스트가 생성되면서 this는 window 를 바인딩 한다.
    → 5 번째줄 console 실행 : outer object window
  3. inner() 실행 컨텍스트가 생성되고 this는 window 를 바인딩 한다.
    → 3 번째줄 console 실행 : inner object window

메서드 내부에서의 this의 동작

  • 메서드 내부에서 this는 호출한 주체의 정보로 결정된다.
var object = {
    outer : function() {
        var inner = function(){
            console.log('inner' + this);
        }
        console.log('outer' + this);
        inner();
    }
}

object.outer();
  1. 먼저 전역 컨텍스트가 생성이되고 object 객체를 생성한다.
    → 12 번째줄object객체의 메서드 outer() 실행
  2. outer() 실행 컨텍스트가 생성되면서 this는 호출한 주체인 object 를 바인딩 한다.
    → 6 번째줄 console 실행 : outer object object
  3. inner() 실행 컨텍스트가 생성되고 this는 window 를 바인딩 한다.
    → 4 번째줄 console 실행 : inner object window

메서드 내부에서 동작한 outer의 this는 호출한 주체인 object를 바인딩 했다.
이에 반한 함수로서 동작한 inner의 this는 앞서 설명한 window를 바인딩 했다.

콜백 함수 내부에서의 this의 동작

  • 콜백 함수에서의 this는 제어권을 가지는 함수가 결정한다.

    • addEventListener가 제어권을 가지는 함수로써, this를 이벤트가 발상한 돔으로 결정한다.
    document.body.innerHTML = "<Button>버튼</Button>"
document.querySelector('Button')
  .addEventListener('click', function() { console.log(this) });

// 버튼 클릭시 - <button> 버튼 </button>

  • 제어권을 가지는 함수가 this를 지정하지 않는 경우 this는 **전역 객체(window)**를 바라본다.

    • forEach가 제어권을 가지는 함수로써, this를 특별히 결정하지 않는다.
    let ary = [ 1, 2, 3, 4, 5];
// forEach 콜백 함수 호출 
ary.forEach( function(ele){
  console.log(this, ele);
})

/* 실행결과 
Window 1  
Window 2  
Window 3    
Window 4  
Window 5  
*/

생성자 내부에서의 this의 동작

  • 생성자 함수에서 this는 class 객체 즉 자기자신이 된다.

    class dataModel {
  constructor(name){
    this.name = name;
    this.showData();
  }
  showData(){
    console.log(this);
  }
}

new dataModel('school');
// 실행결과 - dataModal {name: "school"}