apply, call, bind 차이

call(), apply(), bind() 차이

call(), apply() 는 ECMA 3에서 추가 되었으며, bind()는 ECMA 5에서 추가 되었습니다.

call(), apply()는 invoke입니다. 함수 호출을 즉시 합니다.

bind()는 나중에 실행될때 사용 됩니다. 특정 이벤트를 함수를 호출해야 할때 유용합니다.

I. call()

func.call(this, arg1, arg2, … argN);

this 부분에 객체를 넣어주면 그걸 가리키게 된다. 특이사항은 파라미터를 일일이 콤마로 구분해서 넣어줘야 하는 것.

// call

var obj = {name:"Niladri"};

var greeting = function(a,b,c){

return "welcome "+this.name+" to "+a+" "+b+" in "+c;

};

console.log(greeting.call(obj,"Newtown","KOLKATA","WB"));

II. apply()

func.apply(this, arguments);

call()과 기능은 같지만 파라미터를 Array로 넘겨준다는 특징이 있다. 만약 함수에서 받은 모든 인자를 그대로 넘겨주는 경우, 가변 인자의 경우 유용하다. 또는 선택적으로 배열에 담아 전달할 수 있다.

// apply

var obj = {name:"Niladri"};

var greeting = function(a,b,c){

return "welcome "+this.name+" to "+a+" "+b+" in "+c;

};

// array of arguments to the actual function

var args = ["Newtown","KOLKATA","WB"];

console.log("Output using .apply() below ")

console.log(greeting.apply(obj,args));

III. bind()

bind()는 새로운 함수 인스턴스를 생성한다.

// bind

var obj = {name:"Niladri"};

var greeting = function(a,b,c){

return "welcome "+this.name+" to "+a+" "+b+" in "+c;

};

//creates a bound function that has same body and parameters

var bound = greeting.bind(obj);

console.dir(bound); ///returns a function

console.log("Output using .bind() below ");

console.log(bound("Newtown","KOLKATA","WB")); //call the bound function

참고

https://www.codementor.io/niladrisekhardutta/how-to-call-apply-and-bind-in-javascript-8i1jca6jp

http://www.kimsatgod.com/call-apply-bind-%EC%B0%A8%EC%9D%B4/