자바스크립트 This

대부분의 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체릐 의미한다. 하지만 자바스크립트에서의 this는 어디서든 사용할 수 있고, 그래서 가장 혼란스러운 개념 중 하나라고 할 수 있다.

상황에 따라 달라지는 this

• 자바스크립트에서 this는 실행 컨텍스트가 생성될 때 함께 결정된다. 실행 컨텍스트는 함수가 호출될 때 생성되므로, this는 함수를 호출할 때 결정된다.
• 함수를 실행하는 방법에는 일반적인 함수로서 호출하는 방법과 메서드로서 호출하는 방법이 있다. 일반적인 함수는 그 자체로 독립적인 기능을 수행하지만, 메서드로서 호출된 함수는 자신을 호출한 객체에 관한 동작을 수행한다.

메서드 내부에서의 this

• this에는 호출한 주체에 대한 정보가 담긴다. 즉, 메서드로서 호출된 함수의 경우 해당 함수명 앞의 객체가 곧 this가 된다.

var obj = {
    methodA: function () { console.log(this); },
    inner: {
        methodB: function () { console.log(this); }
    }
};

obj.methodA(); // { methodA: f, inner {...} } ( === obj)

obj.inner.methodB(); // // { methodB: f } ( === obj.inner) 

함수 내부에서의 this

• 어떤 함수를 함수로서 호출했을 때는, 호출한 주체가 없기때문에(개발자가 코드로 호출) this가 지정되지 않는다. 따라서 this가 지정되지 않았기에 this는 전역 객체를 가리킨다.
• ES6에서는 함수 내부에서 this를 바인딩하지 않는 화살표 함수를 새로 도입했다. 화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩 과정 자체가 빠지므로, 상위 스코프의 this를 그대로 활용할 수 있다.

화살표 함수를 사용하면 안되는 경우

• 객체 내 메소드로 화살표 함수를 사용 시, 해당 함수 내 this에는 메소드를 소유한 객체가 바인딩 되지 않고, 상위 컨택스트인 전역 객체 window가 바인딩 된다.

콜백함수에서의 this

setTimeout(function () {
  console.log(this);
}, 3000);

// Window {0: Window, window: Window, self: Window, document: document, name: "", location: Location, …}

[1, 2, 3].forEach(function (x) {
  console.log(this, x);
});

// Window {0: Window, window: Window, self: Window, document: document, name: "", location: Location, …} 1
// Window {0: Window, window: Window, self: Window, document: document, name: "", location: Location, …} 2
// Window {0: Window, window: Window, self: Window, document: document, name: "", location: Location, …} 3  

• 함수 A의 제어권을 다른 함수 B에게 넘겨주는 경우, 함수 A를 콜백함수 라고 한다.
• 콜백함수에서의 this는 무조건 이거다!!!라고 정의할 수 없다. 콜백 함수의 제어권을 가지는 함수가 콜백 함수 내의 this를 무엇으로 정의할지 결정하고, 특별히 정의되지 않은 경우는 전역객체 Window를 바라본다.

생성자함수에서의 this

• 자바스크립트에서 함수는 new 명령어와 함께 함수를 호출하면, 해당 함수는 생성자로서 동작합니다. 그리고 그렇게 생성자 함수로서 호출된 함수의 내부에서 this는 곧 새로 만들 인스턴스 자신이 됩니다.
• 생성자 함수를 호출하면 우선 생성자의 prototype 프로퍼티를 참조하는 proto라는 프로퍼티가 있는 객체를 만들고, 이 객체의 this에 공통 속성들을 부여합니다.

명시적으로 this 바인딩하기

call 메서드

• call 메서드는 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령어 이다. call 메서드의 첫번째 인자를 this로 바인딩하고, 이후 인자들을 호출한 함수의 매개변수로 넘긴다.

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

func(1,2,3) // Window {0: Window, window: Window, self: Window, document: document, name: "", location: Location, …} 1 2 3
func.call({ella: '현주'}, 4,5,6) // {ella: "현주"} 4 5 6

apply 메서드

• call 메서드와 비슷하게 동작하지만, apply는 call과 다르게 두번 째 인자를 배열로 받아 그대로 호출한 함수의 매개변수로 넘긴다.

bind 메서드

• ES5에서 추가된 기능으로, call과 비슷하지만 즉시 호출하지는 않고 넘겨 받은 this, 인수를 바탕으로 새로운 함수를 반환하기만 한다.
• bind한 함수의 name 프로퍼티를 출력하면 bound라는 접두어가 붙는다. 이로 인해 코드 추적이 더 쉬워진다.

 

출처 코어자바스트립트