this

함수 안에 있는 약속된 변수로 함수 내에서 함수 호출 맥락(context)를 의미한다. 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 의미이다.

함수 호출

함수를 호출했을 때 this는 무엇을 가르키는지 살펴보자. this는 전역객체인 window와 같다. 웹브라우저 자바스크립트에서 모든 객체는 전역변수의 프로퍼티이기 때문이다.

function func(){
    if(window === this){
        document.write("window === this");
    }
}
func(); // window === this

메소드 호출

객체의 소속인 메소드의 this는 그 객체를 가르킨다.

var o = {
    func : function(){
        if(o === this){ // o는 위에서 선언한 객체 o를 가르킨다.
            document.write("o === this");
        }
    }
}
o.func(); // o === this

생성자 호출

아래 코드는 함수를 호출했을 때와 new를 이용해서 생성자를 호출했을 때의 차이를 보여준다.

var funcThis = null; 
 
function Func(){
    funcThis = this;
}
var o1 = Func();
if(funcThis === window){
    document.write('window <br />');
}
 
var o2 = new Func();
if(funcThis === o2){
    document.write('o2 <br />');
}

o1(); // window
o2(); // o2

function Func(){
    document.write(o);
}
var o = new Func();

o(); // undefined

만일 이처럼 생성자 안에 객체를 넣는다면 undefined를 출력한다. 생성자로 새로 만들어진 빈 객체는 생성자가 모두 실행된 후 변수에 할당되기 때문이다. 생성자가 실행되기 전까지는 객체는 변수에도 할당될 수 없기 때문에 this가 아니면 객체에 대한 어떠한 작업을 할 수 없다.

apply, call

리터럴

function sum(x,y){ return x + y; } // 함수 리터럴
sum(1,2) // 3

var sum2 = new Function('x','y','return x + y;'); // 생성자 함수
sum2(1,2) // 3

여기서 sum과 sum2는 결과적으로 같다. sum 또한 함수이지만 자바스크립트에선 이 또한 객체이므로 생성자를 통해 빈 객체를 만드는 것과 동일하다. 하지만 new Function()처럼 생성자에 인자처럼 집어넣는 것은 사용하기에 불편하므로, function sum(){} 같은 함수 리터럴로 사용할 수 있다. 이러한 문법을 리터럴이라고 한다.

같은 예로 var o = {} 은 객체리터럴이며 생성자인 new Object() 로 사용할 수 있고, var a = []; 은 배열리터럴로 new Array() 로 사용할 수 있다.

var o = {} // 객체 리터럴
new Object();

var a = [1,2,3]; // 배열 리터럴
new Array(1,2,3);

함수의 메소드인 apply, call을 이용하면 this의 값을 제어할 수 있다.

var o = {}
var p = {}
function func(){
    switch(this){
        case o:
            document.write('o<br />');
            break;
        case p:
            document.write('p<br />');
            break;
        case window:
            document.write('window<br />');
            break;          
    }
}
func(); // window
func.apply(o); // o
func.apply(p); // p

apply의 첫번째 인자로 함수 호출 맥락(context)을 대입한다. func.apply(o)를 실행했을 때 인자 o가 switch문의 this에 대입되어 첫번째 case문을 실행하고 switch문을 탈출한다. apply(p) 또한 p를 출력한다.

일반적인 객체 지향에서는 객체가 주인(master), 메소드가 노예(slave)라는 비유처럼 소속되어 유연성이 없지만 자바스크립트애서는 함수 호출 맥락에 따라 다양한 객체의 메소드가 될 수 있다.

출처 : 생활코딩 - javascript