Javascript call() & apply() vs bind()

** 출처 http://stackoverflow.com/questions/15455009/javascript-call-apply-vs-bind

Use .bind() when you want that function to later be called with a certain context, useful in events.

Use .call() or .apply() when you want to invoke the funciton immediately, and modify the context.

.bind() 함수는 파라미터를 맵핑해서 함수를 리턴하고, 이렇게 재정의된 함수를 이벤트나 콜백 처리용으로 사용한다.

.call()과 .apply() 함수는 파라미터를 맵핑해서 즉시 실행하는 함수로 동작은 완전히 일치하지만, .apply() 함수의 경우 arguments로 파라미터가 리스트로 전달된다는 차이점만 있다.

call attaches this into function and executes the function immediately:

var person = {  
  name: "James Smith",
  hello: function(thing) {
    console.log(this.name + " says hello " + thing);
  }
}

person.hello.call(person, "world"); // output: "James Smith says hello world"

bind attaches this into function and it needs to be invoked separately like this:

var person = {  
  name: "James Smith",
  hello: function(thing) {
    console.log(this.name + " says hello " + thing);
  }
}

var helloFunc = person.hello.bind(person);
helloFunc("world");  // output: "James Smith says hello world"

or like this:

// ...    
var helloFunc = person.hello.bind(person, "world");
helloFunc();  // output: "James Smith says hello world"

apply is similar to call except that it takes an array-like object instead of listing the arguments out one at a time:

function personContainer() {
  var person = {  
     name: "James Smith",
     hello: function() {
       console.log(this.name + " says hello " + arguments[1]);
     }
  }
  person.hello.apply(person, arguments);
}
// output: "James Smith says hello mars", note: arguments[0] = "world" , arguments[1] = "mars"
personContainer("world", "mars"); 

또 다른 예제:

function multiplication(a,b){
    console.log(a*b);
}

// .bind() 사용
var getSixAlways = multiplication.bind(this,3,2);
getSixAlways();    // ==> 6

// .call() 사용
magicMultiplication.call(this,3,2);    // ==> 6

// .apply() 사용
magicMultiplication.apply(this,[5,2]); // ==> 10

콜백함수 사용시 .bind() 함수를 쓰면 좋다.

> var fn = function( callback ){
... console.log("defined by fn");
... if( typeof callback !== 'undefined' ) callback();
... };

> var multiple = function( a, b){
... var result = a * b;
... console.log("multiple: "+a+" * "+b+" = "+result);
... };

> var m1 = multiple.bind(this, 2, 3);

> m1();
multiple: 2 * 3 = 6

> fn( m1 );
defined by fn
multiple: 2 * 3 = 6

> var m2 = multiple.bind(this, 5, 2);

> fn( m2 );
defined by fn
multiple: 5 * 2 = 10

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: