자바스크립트의 this

this는 자기 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조변수다. this를 통해 자기 자신이 속한 객체 또는 자신이 생성할 인스턴스에 접근할 수 있다. 자바스크립트에서 this는 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라진다. 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다.

 

⭐ 호출 방식별 this 바인딩

 

1. 전역 공간에서의 this

전역 공간에서 this는 전역 객체를 가리킨다. 이는 전역 컨텍스트를 생성하는 주체가 전역 객체이기 때문이다. 

 

2. 일반 함수로서 호출할 때의 this

일반 함수를 호출하거나 중첩 함수를 일반 함수로 호출할 때 모두 this는 전역 객체이다. 객체를 생성하지 않기 때문에 어차피 this는 쓸모가 없다.

function outer() {
    console.log('outer this', this); // window
    function inner() {
        console.log('inner this', this);  // window
    }
    inner();
}

outer();

 

3. 메서드로 호출할 때의 this

메서드로 호출하면 this에는 호출한 주체에 대한 정보가 담긴다. 메서드로서 호출하는 경우 호출 주체는 함수명 앞의 객체이고 쉽게 말하면 점 앞에 명시된 객체가 this가 된다.

const obj = {
    func () {
        console.log(this); // obj
    }
}
obj.func();

 

4. 생성자 함수로 호출할 때의 this

함수를 new 연산자와 함께 호출하면 생성자 함수로 동작해 인스턴스를 생성한다. 이 때 this는 생성한 그 인스턴스가 된다.

function Obj(a) {
    this.a = a;
    console.log(this); // Obj {a : 1} === obj
}
const obj = new Obj(1);

 

5. 화살표 함수의 this

화살표 함수는 실행 컨텍스트 생성 시 this를 바인딩하지 않는다. 함수 내부에는 this가 없으며 this를 참조하려고 하면 스코프체인을 거슬러 올라가 가장 가까운 this를 참조하게 된다.

const obj = {
   func : function() {
      console.log(this); // 호출한 주체 obj
      const arrow = () => {
          console.log(this); // 바인딩 안해서 스코프체인상 제일 가까운 obj
      }
      const normal = function () {
          console.log(this); // 호출한 주체가 없으므로 전역객체
      }
      arrow();
      normal();
   }
}
obj.func();

 

 

⭐ 명시적으로 this를 바인딩하는 방법

Function.prototype에 정의된 메서드 call, bind, apply를 사용하면 규칙을 깨고 this를 명시할 수 있다.

 

1. call

메서드의 호출 주체인 함수를 즉시 실행하며 첫 번째 인자로 온 객체를 this로 바인딩하고 그 이후의 인자들을 매개변수로 한다.

function func(b, c) {
    this.b = b;
    this.c = c;
    return this.a + this.b + this.c;
}
func(2, 3); // NaN
func.call({a : 1}, 2, 3);; // 6

 

 

2. apply

call 메서드와 동일하게 호출 주체인 함수를 즉시 실행하고 첫 번째 인자를 this로 바인딩, 두 번째 인자를 비밀번호로 받아 매개변수로 지정한다.

function func(b, c) {
    this.b = b;
    this.c = c;
    return this.a + this.b + this.c;
}
func(2, 3); // NaN
func.apply({a : 1}, [2, 3]); // 6

💡 call / apply의 활용

유사배열객체에 배열 메서드를 적용할 수 있게 된다.

function func(a, b, c) {
    console.log(arguments); // {'0' : 1, '1' : 2, '2' : 3}
    const arr = Array.prototype.slice.call(arguments);
    console.log(arr); // [1, 2, 3]
}
func(1, 2, 3)

 

3. bind 메서드

ES5에서 추가된 기능으로 즉시 호출하지는 않고 넘겨 받은 this와 인수들을 바탕으로 새로운 함수를 반환하기만 하는 메서드이다. 

function func() {
    console.log(this);
}
const bindFunc = func.bind({a : 1});
func(); // window
bindFunc(); // {a : 1}