this(1) 상황따라 바뀌는 this

this 🦎

---

Javascript에서의 this에 대해 알아보기 전에, 그냥 'this(이것)'라는 말을 언제 사용하는지 먼저 생각해보자. 이거좀 먹어봐! 이거 어때? 이거 뭐야?.. 이런 식으로 '이것(this)' 이라는 말은 음식을 지칭하기도, 물건을 지칭하기도 한다. 다시 말해 상황에 따라 다른 대상을 지칭하며 쓰일 수 있는 말이다.

 

Javascrpt에서도 this는 상황에 따라 지칭하는 대상이 바뀐다. 다만 그 상황이라는 게 '함수가 호출되는 상황'일 뿐이다. Javascript의 this는 일단 기본적으로 함수가 호출될 때 (=실행 컨텍스트 생성시) 결정되며, 보통 자신을 호출한 주체의 정보가 담기게 된다.

 

함수 실행 방법

그럼 먼저 '함수가 호출되는 상황'에는 어떤 상황들이 있길래 지칭 대상이 달라진다는 것인지 먼저 살펴보자.

 

1. 전역 공간에서의 this
2. 함수로서 호출
3. 메서드로서 호출
4. new 를 이용한 생성자 호출
5. call/apply를 통한 호출

 

1. 전역 공간에서의 this

엄밀히 말하면 함수 실행 방법은 아니지만, 전역에서 this를 참조하는 경우를 말한다. 전역 공간에서의 this는 '전역 객체'이다. 전역 객체는 브라우저에서는 window, Node.js에서는 global이 된다.

 

console.log(this === window)
// true (브라우저 환경)
console.log(this === global)
// true (Node.js 환경)

 

한 가지 더 흥미로운 사실은 전역 변수를 선언하면, Javascript 엔진은 이를 전역 객체의 속성으로 할당한다는 것이다. 따라서 아래처럼 var 대신 window 속성으로 직접 할당을 할 수도 있다.

 

var a = 10;
windeow.a = 10;

 

 

2. 함수로서 호출

함수는 그 자체로, 혼자서 독립적인 기능을 수행한다. 어딘가에 종속되지 않기 때문에, 바로 아래서 소개할 메서드와는 달리 함수는 호출한 주체 또한 없다. 위에서 this는 자신을 호출한 주체의 정보를 담는다는 이야기를 했었는데, 이를 바탕으로 생각해보면 '함수 ⇒ 호출주체 없음 ⇒ this가 담을정보 없음' 이라는 결론이 나온다. 이렇게 독립적으로 존재하는 경우, this는 전역객체를 가리키게 된다.

 

 

3. 메서드로서 호출

메서드는 자신을 호출한 대상에 종속되어 있다. 호출한 대상은 쉽게말해 메서드 왼쪽에 명시된 객체라고 생각하면 된다. (ex. obj.method()) 이렇게 어떤 객체에 종속된다는 메서드의 특징은 this에도 그대로 적용이 된다. 메서드로 호출된 this는 부모 객체를 기준으로 고정(바인딩)되기 때문이다.

 

함수로서, 메서드로서 호출했을 때의 차이점을 코드로 살펴보자. 먼저 네 번째 줄까지는 함수로 호출한 경우이다. 함수로 호출하는 경우, this는 전역객체를 가리키게 되기 때문에 window객체가 출력된다. 반면 객체의 메서드로 호출되었을 때(obj.method()), this는 부모 객체를 가리킨다. 여기서 부모객체는 obj 이기 때문에 obj의 내용인 { method : f } 가 출력되는 것이다.

 

var func = function(x) {
    console.log(this.x);
}
func(10);    // window객체 10 (함수로 호출)

var obj = {
    method : func
}
obj.method(20);    // {method : f} 20 (메서드로 호출)

 

 

4. new 를 이용한 생성자 호출

생성자 함수는 어떤 공통된 성질을 갖는 객체들을 생성하는데 쓰이는 함수이다. 인스턴스를 찍어내는 일종의 '틀' 같은 역할을 하는 것이다. new 키워드는 함수가 바로 이런 '생성자'로 동작할 수 있도록 해준다. 일단 new와 함께 함수를 호출하면 객체를 생성할 수 있게 되는데, 이 객체를 '인스턴스'라고 한다. 아래 코드에서는 new와 함께 호출된 Dog 함수가 bori라는 인스턴스 객체를 생성한 것이라고 할 수 있다. 이 방법은 객체지향 프로그래밍에서 주로 쓰이는 방법이기 때문에, 자세히는 다음 글에서 따로 다루려고 한다.

 

var Dog = function(name) {
    this.bark = '멍멍';
    this.name = name;
}
var bori = new Dog('보리');

 

생성자 함수 내부를 한번 살펴보자. 생성자 함수(Dog)가 호출되면 새로운 인스턴스 객체(bori)가 생성된다고 했는데, 이렇게 새로 생성된 객체의 this에는 객체의 성질들이 포함된다. 여기서는 bark라는 미리 지정된 공통의 성질, 그리고 넘겨받는 값에 따라 바뀌는 name이라는 새로운 성질이 모두 해당된다. 위의 예제에서 생성자 함수 내부의 this를 출력해보면 아래와 같은 객체가 나올 것이다. 이처럼 생성자 함수 내부의 this는 새로 생성된 인스턴스를 가리킨다.

 

// Dog { bark : '멍멍', name : '보리' }

 

 

5. call/apply를 통한 호출

지금까지의 this는 어떤 규칙에 의해 우리도 모르는 새 지정되었다. 하지만 call이나 apply 메서드를 사용하면 this를 별도의 대상으로 지정할 수 있게 된다. 두 메서드의 첫번째 인자로 들어가는 값이 바로 this이다.

 

예시를 통해 call, apply메서드를 사용하는 방법과 this가 무엇을 가리키게 되는 지 살펴보자. call을 사용하지 않았을 때(func(1, 2))는 this를 지정해주지 않았기 때문에, 그냥 함수를 호출한 것이나 마찬가지이다. 따라서 this는 전역객체를 가리키게 된다. 반면 call을 사용하면 첫번째 인자로 this를 지정할 수 있다. 여기서는 첫 인자인 {x: 1}라는 객체가 this가 되는 것이다.

 

var func = function (a, b) {
    console.log(this, a, b);
};

func(1, 2);
// Window{} 1 2    (call 미사용)

func.call({x: 1}, 3, 4)
// {x: 1} 3 4   (call 사용)

 

apply도 call과 같은 기능을 하며 첫번째 인자가 this라는 것도 동일하다. apply는 인자들을 하나의 배열로 받는다는 점에서만 차이가 있다.

 

var func = function(a, b) {
    console.log(this, a, b);
};
func.apply({x: 1}, [1, 2, 3]);
// {x: 1} 1 2 3

 

 

요약

this는 어떤 상황에 놓여있느냐에 따라 값이 다르게 결정된다. 아래는 대표적인 다섯가지 상황과 각 상황에 따른 this값은 다음과 같다!

 

1. 전역 변수 : 전역 객체
2. 함수로 호출 : 전역 객체
3. 메서드로 호출 : 호출 주체 (메서드명 앞 객체)
4. 생성자 함수로 호출 : 새 인스턴스 객체
5. call, apply 메서드로 호출 : 첫번째 인자