[JavaScript] this

this

this가 가리키는 것은 환경에 따라 변할 수 있지만(dynamic binding(동적 바인딩) : this가 환경에 따라 바뀌는 것), 객체의 메서드인 경우에는 해당 객체를 가리키게 된다.

 

이 때, 객체의 메서드가 화살표 함수 () => {}로 호출된다면 this는 함수가 생성된 환경을 가리키고, 일반함수 function() {}는 this가 함수를 호출한 환경을 가리키게 된다. 아래 코드를 보면 test1()는 실행될 때 새로운 컨텍스트를 생성하기 때문에 this가 global을 가리킨다. 반면, test2()는 함수 컨텍스트를 생성하며 this는 자신을 호출한 환경인 부모 o를 가리키게 되는 것이다.

let o = {
    name: "An",
    test1: () => { console.log(this.name) },
    test2: function() { console.log(this.name) },
}

o.test1();				// expected output: 		=> global
o.test2();				// expected output: An		=> o

 

또 다른 예시를 보자. 중간에 method() 함수가 추가되었다.
첫 번째 this를 보면, 현재 컨텍스트가 상위 부모 컨텍스트인 o를 가리키는 것을 알 수 있다. f1()는 함수 컨텍스트를 생성하여 this가 부모 컨텍스트인 o를 가리킨다. f2()는 f2에 바인딩된 컨텍스트가 없으므로 새로운 컨텍스트를 생성하며 this가 global을 가리키게 된다.

let o = {
    method() {
        console.log(this)				// o
        let f1 = () => console.log(this)		// o
        let f2 = function () { console.log(this) }	// global
        f1(); 
        f2();
    },
};

o.method();

 

이 외에도 this는 bind, apply, call 등으로 가리키는 것을 조작할 수 있다.