this

this는 함수 내에서 함수 호출 맥락(context)를 의미한다. 맥락이라는 것은 상황에 따라서 달라진다는 의미인데, 즉, 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다. 예를 들어 객체 안의 메소드에서 this가 나오면 이것은 메소드가 속해있는 객체를 의미한다. 이처럼 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다

function func() {
    if(window === this) {
        console.log("window === this");
    }
}

위의 func함수를 실행하면 "window === this"가 출력된다. 이것을 해석해보면, func 함수 내에서 this는 웹브라우저 환경의 자바스크립트의 전역객체인 window를 의미하는 것이다.

생성자와 this

함수 안에서 this는 그 함수가 속해있는 객체를 의미한다. 이 객체는 사용자가 만든 객체일수도 있고 전역객체일 수도 있다.

var funcThis = null;

function Func(){//결국 this null이 된다.
    funcThis = this;//Func의 this가 funcThis에 할당되는데, 앞에 var가 없기 때문에 전역변수를 가리킨다.
}
var o1 = Func();
if(funcThis === window) {//전역객
    document.write('window </br>');
}
//new Func() 생성자를 통해 만들어진 객체는 변수 o2에 담긴다.
var o2 = new Func();//생성자로 호출하면 새로운 빈 객체를 만든다. 그러면 this는 이 새로운 객체를 의미한다.
if(funcThis === o2) {
    document.write('window </br>');
}

똑같은 함수지만, 생성자로 사용되면 this는 생성되는 객체가 되고, 함수로 호출하면 이 함수 안에서 this는 window를 가리킨다.

새로 생성되는 객체가 생성자 안에서 this가 된다.(생성자 안에서 this는 생성자가 만든 객체이다.)

apply와 call

자바스크립트가 얼마나 유연한지를 극명하게 보여준다. 함수도 객체라는 것을 다시 떠올려보자. 함수도 객체이기 때문에 property(속성)을 가질 수 있다. 함수가 가질 수 있는 속성 중에 apply와 call이 있다.

function sum(x,y){return x+y;}//함수 리터럴(literal)
sum(1,2);//3
var sum2 = new Function('x','y','return x+y');

첫번째, 두번째 인자는 매개변수처럼 사용되고, 마지막 인자는 함수 sum의 본문에 해당한다. 아래처럼 new를 이용할 수도 있지만 리터럴이라는 문법적 체계를 따르는 것이 더 편리하다.

var sum2 = new Function('x','y','return x+y');

함수 리터럴 : function sum (x,y) {...}

객체 리터럴 : var o = {...}

배열 리터럴 : var a = [1,2,3];

apply와 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);//함수 func는 메소드를 호출하고 인자로 o를 전달한다.
func.apply(p);//함수 func는 메소드를 호출하고 인자로 p를 전달한다.