[Javascript] this 용법 정리

[Javascript] this 용법 정리

 

Javascript의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에 arguments 객체와 this를 암묵적으로 전달받는다.

Javascript 함수의 this는 다른 언어와 조금 다르게 동작한다.

this의 값은 함수를 호출하는 방법에 의해 결정된다.

 

함수 호출 방식과 this 바인딩

 

자바스크립트의 this에 바인딩할 객체가 동적으로 결정된다. 즉, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

 

함수의 호출 방식은 다음과 같다.

1. 함수 호출
2. 메소드 호출
3. 생성자 함수 호출
4. apply/call/bind 호출

 

var foo = function () {
  console.dir(this);
};

// 1. 함수 호출
foo(); // window
// window.foo();

// 2. 메소드 호출
var obj = { foo: foo };
obj.foo(); // obj

// 3. 생성자 함수 호출
var instance = new foo(); // instance

// 4. apply/call/bind 호출
var bar = { name: 'bar' };
foo.call(bar);   // bar
foo.apply(bar);  // bar
foo.bind(bar)(); // bar

 

 

다른 예

 

아래와 같이 someone.whoAmI는 함수 function() { console.log(this) }를 의미한다.

콜백 함수를 넘겨준다고 생각하면 쉽다.

someone.whoAmI()의 this 는 someone 객체가 되고

myWhoAmI의 this는 전역 객체 window가 된다.

 

var someone = {
	name : 'Dean',
    whoAmI : function() {
    	console.log(this);
    }
}

someone.whoAmI(); // {name : "dean", whoAmI : f}

var myWhoAmI = someone.whoAmI;
myWhoAmI(); // Window

var btn = document.getElementById('button');
button.addEventListener('click', bindedWhoAmI); // {<button id="button">...</button>}

 

즉 호출한 객체 === this !!!

 

 

예외는 bind에 의해 만들어 질수 있다.

함수.bind(Obj)를 하게 되면 대상 객체가 Obj로 고정이 된다.

 

var bindedWhoAmI = myWhoAmI.bind(someone);
bindedWhoAmI(); // { name : "Dean", whoAmI : f}