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

call() :-- Hier übergeben wir die Funktionsargumente einzeln, nicht in einem Array-Format

var obj = {name: "Raushan"};

var greeting = function(a,b,c) {
    return "Welcome "+ this.name + " to "+ a + " " + b + " in " + c;
};

console.log(greeting.call(obj, "USA", "INDIA", "ASIA"));

apply() :-- Hier übergeben wir die Funktionsargumente in einem Array-Format

var obj = {name: "Raushan"};

var cal = function(a,b,c) {
    return this.name +" you got " + a+b+c;
};

var arr =[1,2,3];  // array format for function arguments
console.log(cal.apply(obj, arr)); 

bind() :--

       var obj = {name: "Raushan"};

       var cal = function(a,b,c) {
            return this.name +" you got " + a+b+c;
       };

       var calc = cal.bind(obj);
       console.log(calc(2,3,4));

Answer 2

Anrufen: ruft die Funktion auf und ermöglicht es Ihnen, die Argumente einzeln zu übergeben

Anwenden: Apply ruft die Funktion auf und ermöglicht die Übergabe von Argumenten in Form eines Arrays

Binden: Bind gibt eine neue Funktion zurück, die es Ihnen ermöglicht, ein Array und eine beliebige Anzahl von Argumenten zu übergeben.

var person1 = {firstName: 'Raju', lastName: 'king'};
var person2 = {firstName: 'chandu', lastName: 'shekar'};

function greet(greeting) {
    console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}
function greet2(greeting) {
        console.log( 'Hello ' + this.firstName + ' ' + this.lastName);
    }

greet.call(person1, 'Hello'); // Hello Raju king
greet.call(person2, 'Hello'); // Hello chandu shekar

greet.apply(person1, ['Hello']); // Hello Raju king
greet.apply(person2, ['Hello']); // Hello chandu shekar

var greetRaju = greet2.bind(person1);
var greetChandu = greet2.bind(person2);

greetRaju(); // Hello Raju king
greetChandu(); // Hello chandu shekar

Answer 3

Stellen Sie sich vor, bind ist nicht verfügbar. können Sie es einfach wie folgt konstruieren:

var someFunction=...
var objToBind=....

var bindHelper =  function (someFunction, objToBind) {
    return function() {
        someFunction.apply( objToBind, arguments );
    };  
}

bindHelper(arguments);

Answer 4

    function sayHello() {
            //alert(this.message);
            return this.message;
    }
    var obj = {
            message: "Hello"
    };

    function x(country) {
            var z = sayHello.bind(obj);
            setTimeout(y = function(w) {
//'this' reference not lost
                    return z() + ' ' + country + ' ' + w;
            }, 1000);
            return y;
    }
    var t = x('India')('World');
    document.getElementById("demo").innerHTML = t;

Answer 5

Verwenden Sie bind für zukünftige Aufrufe der Funktion. Beide apply y call rufen Sie die Funktion auf.

bind() erlaubt es auch, zusätzliche Argumente an das Args-Array anzuhängen.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind