[javascript] Javascript call () & apply () vs bind ()?

JAVASCRIPT / 글쓴이

난 이미 알고 apply하고 call있는 일련의 유사한 기능이다 this(함수의 컨텍스트).

차이점은 인수를 보내는 방식에 따라 다릅니다 (수동 및 배열)

질문:

그러나 언제 bind()방법을 사용해야 합니까?

var obj = {
  x: 81,
  getX: function() {
    return this.x;
  }
};

alert(obj.getX.bind(obj)());
alert(obj.getX.call(obj));
alert(obj.getX.apply(obj));

jsbin

답변

함수 객체, 함수 호출 call/apply및 bind얼마 전에이 비교를 만들었습니다 .

여기에 이미지 설명을 입력하십시오

.bind새 함수 객체를 반환하므로 이후에 함수를 실행할 수 있도록하면서 지금this 값 을 설정할 수 있습니다 .

답변

.bind()나중에 특정 상황에서 해당 함수를 호출하여 이벤트에 유용하게 사용할 때 사용하십시오 . 함수를 즉시 호출하고 컨텍스트를 수정하려는 경우 .call()또는을 사용하십시오 .apply().

호출 / 적용은 즉시 함수를 호출하는 반면 bind, 나중에 실행될 때 원래 함수를 호출하기 위해 올바른 컨텍스트를 설정하는 함수를 반환합니다. 이렇게하면 비동기 콜백 및 이벤트에서 컨텍스트를 유지할 수 있습니다.

나는 이것을 많이한다 :

function MyObject(element) {
    this.elm = element;

    element.addEventListener('click', this.onClick.bind(this), false);
};

MyObject.prototype.onClick = function(e) {
     var t=this;  //do something with [t]...
    //without bind the context of this function wouldn't be a MyObject
    //instance as you would normally expect.
};

Node.js에서 광범위하게 사용하여 멤버 메소드를 전달하고 비동기 컨텍스트를 시작한 인스턴스가되도록 비동기 콜백에 사용합니다.

바인드의 단순하고 순진한 구현은 다음과 같습니다.

Function.prototype.bind = function(ctx) {
    var fn = this;
    return function() {
        fn.apply(ctx, arguments);
    };
};

다른 인수를 전달하는 것과 같이 더 많은 것이 있지만 그것에 대해 자세히 읽고 MDN 에서 실제 구현 을 볼 수 있습니다 .

도움이 되었기를 바랍니다.

답변

그들은 모두 이것을 함수 (또는 객체)에 첨부 하고 차이점은 함수 호출에 있습니다 (아래 참조).

call은 이것을 함수에 첨부 하고 즉시 함수를 실행합니다.

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

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

bind는 이것을 함수에 첨부하고 다음 과 같이 별도로 호출해야합니다.

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

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

또는 이와 같이 :

...
var helloFunc = person.hello.bind({ name: "Jim Smith" }, "world");
helloFunc();  // output: Jim Smith says hello world"

apply 는 한 번에 하나씩 인수를 나열하는 대신 배열과 유사한 객체를 사용한다는 점을 제외하고는 호출 과 유사합니다 .

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

답변

가장 간단한 양식으로 답변

  • 전화는 함수를 호출하고 인수 하나 하나에 전달할 수 있습니다.
  • Apply 는 함수를 호출하고 인수를 배열로 전달할 수 있도록합니다.
  • 바인드 는 새로운 함수를 반환하여이 배열과 여러 인수를 전달할 수 있습니다.

적용 vs. 통화 vs. 바인드 예제

요구

var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};

function say(greeting) {
    console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}

say.call(person1, 'Hello'); // Hello Jon Kuperman
say.call(person2, 'Hello'); // Hello Kelly King

대다

var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};

function say(greeting) {
    console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}

say.apply(person1, ['Hello']); // Hello Jon Kuperman
say.apply(person2, ['Hello']); // Hello Kelly King

묶다

var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};

function say() {
    console.log('Hello ' + this.firstName + ' ' + this.lastName);
}

var sayHelloJon = say.bind(person1);
var sayHelloKelly = say.bind(person2);

sayHelloJon(); // Hello Jon Kuperman
sayHelloKelly(); // Hello Kelly King

각각을 사용하는 경우

전화와 신청은 서로 교환이 가능합니다. 배열 또는 쉼표로 구분 된 인수 목록으로 보내는 것이 더 쉬운 지 결정하십시오.

나는 항상 Call이 쉼표 (분리 된 목록)이고 Apply가 배열임을 기억하여 어느 것이 무엇인지 기억합니다.

바인드가 약간 다릅니다. 새로운 함수를 반환합니다. 호출 및 적용은 현재 기능을 즉시 실행합니다.

바인드는 많은 일에 좋습니다. 위의 예와 같이 함수를 카레하는 데 사용할 수 있습니다. 간단한 hello 함수를 helloJon 또는 helloKelly로 바꿀 수 있습니다. 언제 발생하는지 알지 못하지만 원하는 컨텍스트를 알고있는 onClick과 같은 이벤트에도 사용할 수 있습니다.

참조 : codeplanet.io

답변

this함수의 호출 방식 에 관계 없이 값을 설정할 수 있습니다 . 콜백 작업시 매우 유용합니다.

  function sayHello(){
    alert(this.message);
  }

  var obj = {
     message : "hello"
  };
  setTimeout(sayHello.bind(obj), 1000);

동일한 결과를 얻으려면 call다음과 같습니다.

  function sayHello(){
    alert(this.message);
  }

  var obj = {
     message : "hello"
  };
  setTimeout(function(){sayHello.call(obj)}, 1000);

답변

multiplication기능이 있다고 가정

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

다음을 사용하여 일부 표준 함수를 만들 수 있습니다 bind

var multiby2 = multiplication.bind(this,2);

이제 multiby2 (b)는 곱셈 (2, b)과 같습니다.

multiby2(3); //6
multiby2(4); //8

바인드에서 두 매개 변수를 모두 전달하면 어떻게됩니까?

var getSixAlways = multiplication.bind(this,3,2);

이제 getSixAlways ()는 곱셈 (3,2)과 같습니다.

getSixAlways();//6

심지어 전달 매개 변수는 6을 리턴합니다.
getSixAlways(12); //6 

var magicMultiplication = multiplication.bind(this);

새로운 곱셈 함수를 만들어 magicMultiplication에 할당합니다.

아뇨, 곱셈 기능을 magicMultiplication에 숨기고 있습니다.

호출
magicMultiplication하면 공백이 반환됩니다.function b()

실행시 잘 작동합니다.
magicMultiplication(6,5); //30

전화와 신청은 어떻습니까?

magicMultiplication.call(this,3,2); //6

magicMultiplication.apply(this,[5,2]); //10

간단히 말해서 bind함수를 만들고 함수 call를 apply실행하는 반면 apply배열의 매개 변수는 기대합니다

답변

모두 Function.prototype.call()와 Function.prototype.apply()주어진있는 함수를 호출 this값을, 그 함수의 반환 값을 반환합니다.

Function.prototype.bind()반면에, 주어진 this값 으로 새로운 함수를 만들고, 그 함수를 실행하지 않고 그 함수를 반환합니다.

자, 다음과 같은 함수를 봅시다 :

var logProp = function(prop) {
    console.log(this[prop]);
};

이제 다음과 같은 객체를 보자.

var Obj = {
    x : 5,
    y : 10
};

다음과 같이 함수를 객체에 바인딩 할 수 있습니다.

Obj.log = logProp.bind(Obj);

이제 Obj.log코드의 어느 곳에서나 실행할 수 있습니다.

Obj.log('x'); // Output : 5
Obj.log('y'); // Output : 10

실제로 흥미로운 곳은에 대한 값을 바인딩 할 this뿐만 아니라 인수에 대한 값입니다 prop.

Obj.logX = logProp.bind(Obj, 'x');
Obj.logY = logProp.bind(Obj, 'y');

우리는 이제 이것을 할 수 있습니다 :

Obj.logX(); // Output : 5
Obj.logY(); // Output : 10