Function.prototype.bind / call / apply의 차이점은 무엇인가요?
⇒ this의 일반 바인딩 규칙외에, 명시적으로 this를 바인딩하는 방법들입니다.
: 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령. 임의의 객체를 this로 지정할 수 있음
(첫번째 인자를 this로 바인딩, 나머지 인자들은 호출할 함수의 매개변수로 사용)
var func = function (a,b,c) {
console.log(this, a, b, c);
};
func(1,2,3); //this ===Window(일반 함수로 호출했기 때문에 전역객체를 바라봄)
func.call({**x:1**}, 4,5,6); //this ==={x:1}
:call메서드와 기능적으로 완전히 동일. 차이점은 호출할 함수의 매개변수를 배열로 지정한다는 점.
var func = function (a,b,c) {
console.log(this,a,b,c); //this === {x:1}
};
//첫번째 인자 : this지정, 두번째 인자: 배열형태로 호출할 함수의 매개변수 지정
func.apply(**{x:1}**,**[4,5,6]**); // {x:1} 4 5 6 출력
var obj = {
a: 1,
method: function (x,y) {
console.log(this.a,x,y);
}
};
obj.method.apply({a:4}, [5,6]) //4 5 6 출력
call과 비슷하지만 즉시 호출하지 않고 새로운 함수를 return하기만 하는 메서드.
var func = function (a,b,c,d) {
console.log(this, a,b,c,d);
};
func(1,2,3,4); //this === window(함수를 함수로 호출했기 때문)
var bindFunc1 = func.bind({ x: 1}); //func함수의 this를 {x:1}로 바인딩한 함수를 **반환**
bindFunc1(5,6,7,8); //{x:1} 5 6 7 8 출력
(var self = this;의 방법으로 우회하는 것보다 깔끔하게 처리할 수 있음)
//CALL 사용
var obj= {
outer : function () {
console.log(this);
var innerFunc = function () {
console.log(this);
};
**//호출시 call메서드 사용(this지정후 즉시 실행하므로)**
**innerFunc.call(this)**;
//innerFunc();로 했다면 전역 객체가 this가 됐을 것.
}
};
obj.outer();
//BIND사용
var obj = {
outer: function () {
console.log(this);
**// 함수 선언시 바로 bind메서드를 사용(return만 하므로)**
var innerFunc = function () {
console.log(this);
**}.bind(this);**
innerFunc();
}
};
obj.outer();
(cf. 화살표 함수 사용시, this 바인딩 자체를 스킵하므로 상위 스코프의 this를 가져오게 됨)
call
, apply
메소드는 this를 명시적으로 지정하면서 함수 /메서드를 호출합니다(즉시 실행)bind
메서드는 this 및 함수에 넘길 인수를 일부 지정해서 새로운 함수를 만듭니다.(this 명시된 함수를 return만 함. 실행하지 않음)<코어 자바스크립트>