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

Die grundlegenden Unterschiede zwischen Call, Apply und Bind sind:

Bind wird verwendet, wenn der Ausführungskontext später im Bild erscheinen soll.

Ex:

var car = { 
  registrationNumber: "007",
  brand: "Mercedes",

  displayDetails: function(ownerName){
    console.log(ownerName + ' this is your car ' + '' + this.registrationNumber + " " + this.brand);
  }
}
car.displayDetails('Nishant'); // **Nishant this is your car 007 Mercedes**

Nehmen wir an, ich möchte diese Methode in einer anderen Variablen verwenden

var car1 = car.displayDetails('Nishant');
car1(); // undefined

Um die Referenz von car in einer anderen Variablen zu verwenden, sollten Sie

var car1 = car.displayDetails.bind(car, 'Nishant');
car1(); // Nishant this is your car 007 Mercedes

Sprechen wir über die weitergehende Nutzung der Bindungsfunktion

var func = function() {
 console.log(this)
}.bind(1);

func();
// Number: 1

Warum? Weil jetzt func mit der Nummer 1 verbunden ist, wenn wir in diesem Fall nicht bind verwenden, zeigt es auf Global Object.

var func = function() {
 console.log(this)
}.bind({});

func();
// Object

Call, Apply werden verwendet, wenn Sie die Anweisung gleichzeitig ausführen wollen.

var Name = { 
    work: "SSE",
    age: "25"
}

function displayDetails(ownerName) {
    console.log(ownerName + ", this is your name: " + 'age' + this.age + " " + 'work' + this.work);
}
displayDetails.call(Name, 'Nishant')
// Nishant, this is your name: age25 workSSE

// In apply we pass an array of arguments
displayDetails.apply(Name, ['Nishant'])
// Nishant, this is your name: age25 workSSE

Answer 2

anrufen/bewerben führt die Funktion sofort aus:

func.call(context, arguments);
func.apply(context, [argument1,argument2,..]);

binden führt die Funktion nicht sofort aus, sondern gibt die verpackte anwenden. Funktion (zur späteren Ausführung):

function bind(func, context) {
    return function() {
        return func.apply(context, arguments);
    };
}

Answer 3

Call apply and bind. und wie sie sich unterscheiden.

Lasst uns lernen, wie man telefoniert und wie man eine alltägliche Terminologie anwendet.

Sie haben drei Automobile your_scooter , your_car and your_jet die mit demselben Mechanismus (Methode) beginnen. Wir haben ein Objekt erstellt automobile mit einer Methode push_button_engineStart .

var your_scooter, your_car, your_jet;
var automobile = {
        push_button_engineStart: function (runtime){
        console.log(this.name + "'s" + ' engine_started, buckle up for the ride for ' + runtime + " minutes");
    }
}

Lassen Sie uns verstehen, wann "Call and Apply" verwendet wird. Nehmen wir an, Sie sind ein Ingenieur und haben your_scooter , your_car y your_jet die nicht mit einem push_button_engine_start ausgeliefert wurde und Sie einen Drittanbieter verwenden möchten push_button_engineStart .

Wenn Sie die folgenden Codezeilen ausführen, geben sie einen Fehler aus. WARUM?

//your_scooter.push_button_engineStart();
//your_car.push_button_engineStart();
//your_jet.push_button_engineStart();

automobile.push_button_engineStart.apply(your_scooter,[20]);
automobile.push_button_engineStart.call(your_jet,10);
automobile.push_button_engineStart.call(your_car,40);

So ist das obige Beispiel erfolgreich gibt your_scooter, your_car, your_jet ein Merkmal von Automobil-Objekt.

Lassen Sie uns tiefer eintauchen Hier werden wir die obige Codezeile aufteilen. automobile.push_button_engineStart hilft uns bei der Ermittlung der verwendeten Methode.

Außerdem verwenden wir apply oder call in der Punktschreibweise. automobile.push_button_engineStart.apply()

Jetzt akzeptieren Antrag und Aufruf zwei Parameter.

1. Kontext
2. Argumente

In der letzten Zeile des Codes wird also der Kontext festgelegt.

automobile.push_button_engineStart.apply(your_scooter,[20])

Unterschied zwischen Aufruf und Antrag ist nur, dass apply Parameter in Form eines Arrays akzeptiert, während call einfach eine durch Kommata getrennte Liste von Argumenten akzeptieren kann.

Was ist die JS-Bind-Funktion?

Eine Bindungsfunktion bindet im Grunde den Kontext von etwas und speichert ihn dann in einer Variablen zur späteren Ausführung.

Lassen Sie uns unser vorheriges Beispiel noch besser machen. Zuvor haben wir eine Methode verwendet, die zum Auto-Objekt gehört, und sie dazu benutzt, um your_car, your_jet and your_scooter . Stellen wir uns nun vor, wir wollen eine separate push_button_engineStart Wir können unsere Autos zu jedem späteren Zeitpunkt der Ausführung einzeln starten.

var scooty_engineStart = automobile.push_button_engineStart.bind(your_scooter);
var car_engineStart = automobile.push_button_engineStart.bind(your_car);
var jet_engineStart = automobile.push_button_engineStart.bind(your_jet);

setTimeout(scooty_engineStart,5000,30);
setTimeout(car_engineStart,10000,40);
setTimeout(jet_engineStart,15000,5);

immer noch nicht zufrieden?

Machen wir es klar wie Kloßbrühe. Zeit zum Experimentieren. Wir gehen zurück zum Aufruf und zur Anwendung der Funktion und versuchen, den Wert der Funktion als Referenz zu speichern.

Das folgende Experiment schlägt fehl, weil call und apply sofort aufgerufen werden und wir daher nie dazu kommen, eine Referenz in einer Variablen zu speichern, was der bind-Funktion die Show stiehlt

var test_function = automobile.push_button_engineStart.apply(your_scooter);

Answer 4

Syntax

• aufrufen (thisArg, arg1, arg2, ...)
• anwenden. (thisArg, argsArray)
• binden (thisArg[, arg1[, arg2[, ...]]])

Hier

• thisArg ist das Objekt
• argArray ist ein Array-Objekt

• arg1, arg2, arg3,... sind zusätzliche Argumente

  function printBye(message1, message2){ console.log(message1 + " " + this.name + " "+ message2); }

  var par01 = { name:"John" }; var msgArray = ["Bye", "Never come again..."];

  printBye.call(par01, "Bye", "Never come again..."); //Bye John Never come again...

  printBye.call(par01, msgArray); //Bye,Never come again... John undefined

  //so call() doesn't work with array and better with comma seperated parameters

  //printBye.apply(par01, "Bye", "Never come again...");//Error

  printBye.apply(par01, msgArray); //Bye John Never come again...

  var func1 = printBye.bind(par01, "Bye", "Never come again..."); func1();//Bye John Never come again...

  var func2 = printBye.bind(par01, msgArray); func2();//Bye,Never come again... John undefined //so bind() doesn't work with array and better with comma seperated parameters

Answer 5

JavaScript Aufruf()

const person = {
    name: "Lokamn",
    dob: 12,
    print: function (value,value2) {
        console.log(this.dob+value+value2)
    }
}
const anotherPerson= {
     name: "Pappu",
     dob: 12,
}
 person.print.call(anotherPerson,1,2)

JavaScript apply()

    name: "Lokamn",
    dob: 12,
    print: function (value,value2) {
        console.log(this.dob+value+value2)
    }
}
const anotherPerson= {
     name: "Pappu",
     dob: 12,
}
 person.print.apply(anotherPerson,[1,2])

**Aufruf- und Anwendungsfunktion unterscheiden sich Call nimmt ein separates Argument, aber Apply nimmt ein Array wie:[1,2,3] **

JavaScript bind()

    name: "Lokamn",
    dob: 12,
    anotherPerson: {
        name: "Pappu",
        dob: 12,
        print2: function () {
            console.log(this)
        }
    }
}

var bindFunction = person.anotherPerson.print2.bind(person)
 bindFunction()