Javascript this

작성일 | In

[Javascript] this

this란?

this는 함수 내에서 함수 호출 맥락을 의미한다. ‘맥락’ 이라는 단어 그대로 상황에 따라 this는 달라질 수 있다. JS에서 함수와 객체의 경계가 모호 (느슨) 한데, this는 함수와 객체를 구분하는 중요한 역할을 한다.


함수, 메서드에서의 this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let curThis = null;
function test() {
    curThis = this;
}

let func = test();
if(curThis === window)
    console.log('this is function');

let method = new test();
if(curThis === method)
    console.log('this is method');
// 출력 결과
this is function
this is method

함수에서 this는 window (전역 객체) 를 의미한다. func 변수에 test()함수를 넣을 때, this가 window이므로 curThis 에는 window가 들어가게 된다.

메서드에서 this는 생성된 객체를 의미한다. method 변수에 test() 객체를 생성해서 할당할 때 this는 test() 객체가 되고, 이를 method에 할당했으므로 curThis === method 가 참이된다.


this와 apply

apply를 소개할 때 잠깐 다루었던 부분이다. 이제 this가 무엇인지 살펴보았으니 apply를 사용한 함수 호출이 this에 어떤 영향을 주는지, apply를 어떤 상황에 사용해야 하는지 더 쉽게 감을 잡을 수 있을 것이다. apply에 대한 내용은 아래 포스트에서 볼 수 있다. Javascript apply

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let o = {};
let p = {};

function test() {
    switch(this) {
        case window: console.log('window'); break;
        case o: console.log('o'); break;
        case p: console.log('p'); break;
    }
}

test();
test.apply(o);
test.apply(p);

// 출력 결과
window
o
p

JS에서 모든 함수는 apply를 내장 함수로 갖고 있다. apply의 첫 번째 인자에 객체를 넘겨주면, 해당 객체는 그 시점에서 호출한 함수의 this가 된다.

이전에 살펴본 바로는 this를 효율적으로 사용하기 위해 메서드 내에서 this를 활용했었다. 메서드는 객체에 종속된 함수로, 어떤 객체의 메서드를 다른 객체에서 사용하는 건 불가능했다. (비유하자면 객체 = 주인, 메서드 = 노예)

그러나 apply를 사용하여 함수를 호출하면 this를 원하는 대로 바꿀 수 있으므로 해당 함수는 일종의 프리랜서(?) 처럼 동작하게 된다. (특정 객체만을 this로 인식하는 메서드와는 달리 apply를 사용한 방법은 다양한 객체를 this로 여길 수 있다.)

0%