객체 지향 프로그래밍(4) - this

this

• 함수 안에서 함수 호출 맥락을 의미(맥락: 의미가 고정되어 있지 않고 상황에 따라 달라질 수 있음)
• 자바스크립트의 함수 안에서 사용할 수 있는, 의미가 약속되어 있는(그러나 고정적이지 않은) 변수
• this가 '함수 호출 맥락'이라는 말은, 함수를 어떻게 호출하느냐에 따라 this가 가리키는 대상이 달라진다는 뜻
• 본질 : "함수 안에서 this는 함수가 소속되어 있는 객체를 가리킨다"

 

1. 함수 호출에서의 this

function func(){
  console.log(this === window);
}
func(); // true
window.func(); // true

함수 호출에서의 this는 전역 객체인 window를 가리킨다. 이때, 위에서 볼 수 있듯이 func( );와 window.func( ); 둘 다 실행이 된다. 모든 전역 변수와 함수는 사실 window 객체의 프로퍼티이기 때문이다. 객체를 명시하지 않으면 암시적으로 window의 프로퍼티로 간주된다.

함수 안에서 this는 함수가 소속되어 있는 객체를 가리킨다는 본질을 기억한다면 여기서 this가 window를 가리키는 이유를 알 수 있다. 

2. 메서드 호출에서의 this

var o = {
    func : function(){
        console.log(this === o);
    }
}
o.func() // true

객체의 소속인 메서드의 this는 그 객체를 가리킨다. 함수 안에서 this는 함수가 소속되어 있는 객체를 가리킨다는 것을 확인할 수 있다.

이때, 어떤 변수에 o.func를 담아서 사용하면 어떻게 될까? (이 부분이 내가 가장 헷갈렸던 부분이다...)

var o = {
    func : function(){
        return(this === o);
    }
}
let fn = o.func; //o.func를 변수 fn에 담아서 함수로서 사용한다면?
fn() // false

o.func에는 함수가 값으로 저장되어 있는 것이 아니다. 함수는 메모리 상에 저장되어 있으며, o.func는 그 주소를 가지고 있다. (함수는 참조 타입이기 때문) 그리고 fn은 전역 변수이기 때문에 window 객체에 소속되어 있다. 위에서 fn( )이 호출되는 시점은, window 객체의 메서드로서 호출되는 것( fn( ) === window.fn( ) )이며, 이때 fn이 참조하는 함수 안에서의 this는 fn이 소속되어 있는 window 객체를 가리키게 된다.

3. 생성자 호출에서의 this

let funcThis = null;

function Func(){
  funcThis = this;
}

Func(); //Func를 함수로서 호출

if(funcThis === window){
  console.log('this === window');
}
// 'this === window' --> Func를 함수로서 호출 했을 때 this는 window를 가리킨다.

let obj = new Func(); // Func를 생성자로서 호출하고 있다.

if(funcThis === obj){
  console.log('this === obj');
}
// 'this === obj' --> 이때 this는 생성자를 통해 만들어진 객체를 가리킨다.

Func를 new 키워드와 함께 호출하면, Func를 생성자로써 호출하는 것이다. 이때 생성자 안에 있는 this는 만든 객체(인스턴스)를 가리킨다.

4. apply, call과 this

apply와 call 메서드는 함수에 기본적으로 내장되는 메서드다. 첫 번째 인자로 넘겨지는 것을 this로 간주한다. this의 값을 제어하고 싶을 때 사용할 수 있다.

var o = {}
var p = {}

function func(){
  switch(this){ // 함수가 실행될 때, this가 가리키는 것이 무엇인지 확인한다.
    case o: // this가 o를 가리킬 때 'this === o'를 콘솔창에 출력
      console.log('this === o');
      break;
    case p: // this가 p를 가리킬 때 'this === p'를 콘솔창에 출력
      console.log('this === p');
      break;    
    case window: // this가 window를 가리킬 때 'this === window'를 콘솔창에 출력
      console.log('this === window');
      break;
  }
}

func() // this === window --> 함수 호출이기 때문에 this는 window를 가리킨다
func.apply(o); // this === o --> func를 호출 하는데, this의 값을 o로 제공하겠다는 뜻
func.apply(p); // this === p --> func를 호출 하는데, this의 값을 p로 제공하겠다는 뜻