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

Question

Ich weiß bereits, dass apply y call sind ähnliche Funktionen, die die this (Kontext einer Funktion).

Der Unterschied liegt in der Art und Weise, wie wir die Argumente senden (manuell oder als Array)

Pregunta:

Aber wann sollte ich die bind() Verfahren ?

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

Answer 1

Utilice .bind() wenn Sie möchten, dass diese Funktion später mit einem bestimmten Kontext aufgerufen wird, was bei Ereignissen nützlich ist. verwenden .call() o .apply() wenn Sie die Funktion sofort aufrufen und den Kontext ändern wollen.

Call/Apply rufen die Funktion sofort auf, während bind gibt eine Funktion zurück, die bei der späteren Ausführung den richtigen Kontext für den Aufruf der ursprünglichen Funktion hat. Auf diese Weise können Sie den Kontext in asynchronen Callbacks und Ereignissen beibehalten.

Ich mache das sehr oft:

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.
};

Ich verwende es ausgiebig in Node.js für asynchrone Callbacks, für die ich eine Member-Methode übergeben möchte, aber trotzdem möchte, dass der Kontext die Instanz ist, die die asynchrone Aktion gestartet hat.

Eine einfache, naive Implementierung von bind würde wie folgt aussehen:

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

Es gibt noch mehr (wie die Übergabe anderer Args), aber Sie können mehr darüber lesen und die tatsächliche Implementierung sehen im MDN .

Answer 2

Sie alle befestigen diese in eine Funktion (oder ein Objekt) umgewandelt, wobei der Unterschied im Funktionsaufruf liegt (siehe unten).

aufrufen fügt diese in Funktion und führt die Funktion sofort aus:

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"

binden fügt diese in eine Funktion umgewandelt und muss separat wie folgt aufgerufen werden:

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"

oder so:

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

anwenden. ist vergleichbar mit aufrufen mit dem Unterschied, dass es ein array-ähnliches Objekt nimmt, anstatt die Argumente einzeln aufzulisten:

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"

Answer 3

Antwort in SIMPLEST-Form

• Rufen Sie an. ruft die Funktion auf und erlaubt es Ihnen, die Argumente einzeln zu übergeben eins.
• Bewerbung ruft die Funktion auf und erlaubt Ihnen, Argumente zu übergeben als Array übergeben.
• Binden Sie gibt eine neue Funktion zurück, die es Ihnen ermöglicht, eine dieses Array und eine beliebige Anzahl von Argumenten übergeben.

---

Beispiele für Anwenden vs. Aufrufen vs. Binden

Rufen Sie an.

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

Bewerbung

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

Binden Sie

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

Wann sind sie zu verwenden?

Anruf und Antrag sind ziemlich austauschbar. Entscheiden Sie einfach, ob es einfacher ist, ein Array oder eine kommagetrennte Liste von Argumenten zu senden.

Ich merke mir immer, was welches ist, indem ich mir merke, dass Call für Komma (getrennte Liste) und Apply für Array steht.

Bind ist ein bisschen anders. Es gibt eine neue Funktion zurück. Call und Apply führen die aktuelle Funktion sofort aus.

Bind ist für viele Dinge geeignet. Wir können es verwenden, um Funktionen wie im obigen Beispiel zu curryen. Wir können eine einfache Hallo-Funktion nehmen und sie in ein HalloJon oder HalloKelly verwandeln. Wir können es auch für Ereignisse wie onClick verwenden, bei denen wir nicht wissen, wann sie ausgelöst werden, aber wir wissen, welchen Kontext sie haben sollen.

Referenz: codeplanet.io

Answer 4

Ich habe diesen Vergleich zwischen Funktionsobjekten und Funktionsaufrufen erstellt, call/apply y bind vor einer Weile:

.bind ermöglicht es Ihnen, die this Wert jetzt während Sie die Funktion ausführen können in Zukunft weil sie ein neues Funktionsobjekt zurückgibt.

Answer 5

TL;DR:

In einfachen Worten: bind erstellt die Funktion, call und apply führen die Funktion aus, wobei apply die Parameter in einem Array erwartet

Vollständige Erläuterung

Angenommen, wir haben multiplication función

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

Erstellen wir einige Standardfunktionen mit bind

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

Jetzt ist multiby2(b) gleich der Multiplikation(2,b);

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

Was passiert, wenn ich beide Parameter in bind

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

Jetzt ist getSixAlways() gleich der Multiplikation(3,2);

getSixAlways();//6

selbst die Übergabe des Parameters ergibt 6; getSixAlways(12); //6

var magicMultiplication = multiplication.bind(this);

Dies erstellt eine neue Multiplikationsfunktion und weist sie magicMultiplication zu.

Oh nein, wir verstecken die Multiplikationsfunktionalität in magicMultiplication.

aufrufen magicMultiplication gibt ein leeres function b()

bei der Ausführung funktioniert es einwandfrei magicMultiplication(6,5); //30

Wie wäre es mit anrufen und sich bewerben?

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

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