call() 과 apply() 의 this 바인딩

기본형태는 아래와 같다.

someFunction.call([thisObj[, arg[, arg2[, ...]]]])

첫번째 인자 thisObj 는 someFunction 의 this로 사용될 객체이다.

그 뒤로는 함수내에서 추가로 쓰일 파라미터 값들이다. ( 선택사항 )

예제 )

var obj = {
    z : "zzz",
    a : "aaa",
    b : "bbb"
}

var test =  function(arg1 = "test1", arg2 = "test2"){
    console.log(`p1 : ${this.a} / p2 : ${this.b} / arg1 = ${arg1} / arg2 = ${arg2}`);
}

test.call(obj, 123, 456);
// 결과  -->  p1 : aaa / p2 : bbb / arg1 = 123 / arg2 = 456

 

위 예제에서 .call() 첫번째 인자로 obj를 넘겨주고 있다. 그래서 test 함수의 this는 obj를 가리키게되어 this.a 가 obj.a 가 된것이다.

arg1, 2 는 추가로 전달받은 인자값들이다. ( = obj 의 this를 test의 this로 바인딩 )

 

apply() 는 call() 과 똑같다.

한가지 차이점은 thisObj 이후 던지는 인자값을 배열로 넘긴다.

ex) 

test.call(obj, [123, 456]);