call, apply, bind (3) - bind

bind란?

지난 call과 apply에서 원래 지정된 this를 사용하는 것이 아닌, 다른 객체 혹은 주체를 가져와 메소드만 사용할 수 있다는 것을 배웠다. bind가 하는 것은 this만 변경하는 것이다. call과 apply는 this 대상을 '변경'시키고 메소드를 '실행'시키는 것 까지 하는 것이라면, bind는 단지 this 대상만을 변경시켜주는 것이다.

 

(1) 아무 대상도 지정안해줬을때

처음 실행되고서 어떤 지정도 안해줬다면 this는 전역객체를 가리키며, 이는 window객체를 가리킨다.

this
//Window {parent: Window, opener: null, top: Window, length: 1, frames: Window, …}

(2)bind하기 전, 객체 두개를 설정한다. obj2.get()을 실행하면 get을 실행하는 주체가 obj2이기 때문에 4 5가 출력된다.

let obj = {a:1, b: {c:3}}

let obj2 ={
    a : 4,
    b : 5,
    get : function () {console.log(this.a, this.b)}
}

obj2.get()
//4 5

그렇지만, call과 apply가 그랬듯, 대상을 변경해주고 싶다면 아래과 같이하고 실행시킬때 함수처럼 ()만 붙이면 된다.

obj2.get.bind(obj)
//ƒ () {console.log(this.a, this.b)}

obj2.get.bind(obj)();
//1 {c: 3}

물론 this를 바인딩 하는 것에는 이보다 더 다양한 방법이 존재하고, 여러 이름들이 있지만, call과 apply와 다르게 this만 바꿔서 둔 다음, 실행은 나중에 시키고 싶을 때 시키는 차이점이 있다는 것을 알면 좋을 것 같다. 더 자세한 분류는 mdn에 있으므로 참고하면 좋을 것이다.