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

Wszystkie dołączają to do funkcji (lub obiektu), a różnica polega na wywołaniu funkcji (patrz niżej).

Call attaches to do funkcji i wykonuje funkcję natychmiast:

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 dołącza to do funkcji i musi być wywoływana oddzielnie w ten sposób:

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"

Lub w ten sposób:

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

Apply jest podobne do call z tym, że wymaga obiekt podobny do tablicy zamiast wypisywania argumentów pojedynczo:

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"                                     

Odpowiedź w najprostszej formie

• Call wywołuje funkcję i pozwala przekazać argumenty jeden przez jeden.
• Apply wywołuje funkcję i pozwala na podanie argumentów jako tablica.
• Bind zwraca nową funkcję, pozwalającą na przekazanie w ta tablica i dowolna liczba argumentów.

Apply vs. Call vs. Bind Przykłady

Call

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

Zastosuj

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

Bind

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

Kiedy Używać Każdego

Call I apply są całkiem wymienne. Po prostu zdecyduj, czy łatwiej jest wysłać tablicę czy oddzieloną przecinkami listę argumentów.

Zawsze pamiętam, który z nich jest który pamiętając, że wywołanie jest dla przecinka (lista rozdzielona) I Apply jest dla tablicy.

Bind jest nieco inny. Zwraca nową funkcję. Zadzwoń i aplikuj Uruchom bieżącą funkcję natychmiast.

Referance: codeplanet.io

Pozwala ustawić wartość dla this niezależnie od sposobu wywołania funkcji. Jest to bardzo przydatne podczas pracy z wywołaniami zwrotnymi:

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

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

Osiągnięcie tego samego wyniku z call wyglądałoby tak:

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

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

Załóżmy, że mamy multiplication funkcję

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

Pozwala tworzyć standardowe funkcje za pomocą bind

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

Teraz multiby2 (b)jest równe mnożeniu (2, b);

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

Co jeśli przekażę oba parametry w bind

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

Teraz getSixAlways() jest równe mnożeniu (3,2);

getSixAlways();//6

Even passing parameter zwraca 6; getSixAlways(12); //6

var magicMultiplication = multiplication.bind(this);

To tworzy nową funkcję mnożenia i przypisuje ją do magicmultiplikacja.

O nie, ukrywamy funkcję mnożenia w magicmultiplikacji.

Wywołanie magicMultiplication zwraca puste function b()

Przy wykonaniu działa dobrze magicMultiplication(6,5); //30

Może zadzwoń i aplikuj?

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

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

W prostych słowach, bind tworzy funkcję, call i apply wykonuje funkcję, podczas gdy apply oczekuje parametrów w tablicy

Obie Function.prototype.call() oraz Function.prototype.apply() wywołanie funkcji o podanej wartości this i zwrócenie wartości zwracanej tej funkcji.

Function.prototype.bind(), z drugiej strony, tworzy nową funkcję o podanej wartości this i zwraca tę funkcję bez jej wykonywania.

Weźmy więc funkcję, która wygląda tak:

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

Teraz weźmy obiekt, który wygląda tak:

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

Możemy związać nasze funkcja do naszego obiektu w ten sposób:

Obj.log = logProp.bind(Obj);

Teraz możemy uruchomić Obj.log gdziekolwiek w naszym kodzie:

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

Kiedy robi się naprawdę ciekawie, jest to, gdy wiążesz nie tylko wartość dla this, ale także dla jej argumentu prop:

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

Możemy teraz zrobić to:

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

Oto jeden dobry artykuł aby zilustrować różnicę między bind(), apply() i call(), podsumuj to jak poniżej.

• bind() pozwala nam łatwo ustawić, który konkretny obiekt będzie powiązany z this , gdy wywołana jest funkcja lub metoda.

  // This data variable is a global variable​
  var data = [
      {name:"Samantha", age:12},
      {name:"Alexis", age:14}
  ]
  var user = {
      // local data variable​
      data    :[
          {name:"T. Woods", age:37},
          {name:"P. Mickelson", age:43}
      ],
      showData:function (event) {
          var randomNum = ((Math.random () * 2 | 0) + 1) - 1; // random number between 0 and 1​
          console.log (this.data[randomNum].name + " " + this.data[randomNum].age);
      }
  }
  
  // Assign the showData method of the user object to a variable​
  var showDataVar = user.showData;
  showDataVar (); // Samantha 12 (from the global data array, not from the local data array)​
  /*
  This happens because showDataVar () is executed as a global function and use of this inside 
  showDataVar () is bound to the global scope, which is the window object in browsers.
  */
  
  // Bind the showData method to the user object​
  var showDataVar = user.showData.bind (user);
  // Now the we get the value from the user object because the this keyword is bound to the user object​
  showDataVar (); // P. Mickelson 43​
  

• bind() pozwól nam pożyczyć metody

  // Here we have a cars object that does not have a method to print its data to the console​
  var cars = {
      data:[
         {name:"Honda Accord", age:14},
         {name:"Tesla Model S", age:2}
     ]
  }
  
  // We can borrow the showData () method from the user object we defined in the last example.​
  // Here we bind the user.showData method to the cars object we just created.​
  cars.showData = user.showData.bind (cars);
  cars.showData (); // Honda Accord 14​
  

  Jeden problem z tym przykładem polega na tym, że dodajemy nową metodę {[16] } na obiekcie cars i możemy nie chcieć tego robić. wystarczy pożyczyć metodę, ponieważ obiekt cars może mieć już właściwość lub nazwę metody showData. Nie chcemy go przypadkowo zastąpić. Jak zobaczymy w naszej dyskusji Apply i Call poniżej, najlepiej wypożyczyć metodę używając metody Apply lub Call.

• bind() pozwól nam curry funkcji

  Funkcja Currying, znany również jako częściowe zastosowanie funkcji , jest użycie funkcja (która akceptuje jedną lub więcej arguments), która zwraca nową funkcję z niektórymi już ustawionymi argumentami.

  function greet (gender, age, name) {
      // if a male, use Mr., else use Ms.​
      var salutation = gender === "male" ? "Mr. " : "Ms. ";
      if (age > 25) {
          return "Hello, " + salutation + name + ".";
      }else {
          return "Hey, " + name + ".";
      }
   }
  

  Możemy użyć bind() do curry tej greet funkcji

  // So we are passing null because we are not using the "this" keyword in our greet function.
  var greetAnAdultMale = greet.bind (null, "male", 45);
  
  greetAnAdultMale ("John Hartlove"); // "Hello, Mr. John Hartlove."
  
  var greetAYoungster = greet.bind (null, "", 16);
  greetAYoungster ("Alex"); // "Hey, Alex."​
  greetAYoungster ("Emma Waterloo"); // "Hey, Emma Waterloo."
  

• apply() lub call() aby ustawić to wartość

  The apply, call, i bind wszystkie metody są używane do ustawiania tej wartości podczas wywoływania metody i robią to w nieco różne sposoby, aby umożliwić korzystanie z bezpośredniej kontroli i wszechstronności w naszym kodzie JavaScript.

  Metody apply i call są prawie identyczne przy ustawianiu tej wartości, z wyjątkiem tego, że przekazujesz parametry funkcji do apply () jako tablicy , podczas gdy musisz wypisać parametry indywidualnie, aby przekazać je do metody call ().

  Oto przykład użycia call lub apply do Ustawienia tego w funkcji wywołania zwrotnego.

  // Define an object with some properties and a method​
  // We will later pass the method as a callback function to another function​
  var clientData = {
      id: 094545,
      fullName: "Not Set",
      // setUserName is a method on the clientData object​
      setUserName: function (firstName, lastName)  {
          // this refers to the fullName property in this object​
          this.fullName = firstName + " " + lastName;
      }
  };
  
  function getUserInput (firstName, lastName, callback, callbackObj) {
       // The use of the Apply method below will set the "this" value to callbackObj​
       callback.apply (callbackObj, [firstName, lastName]);
  }
  
  // The clientData object will be used by the Apply method to set the "this" value​
  getUserInput ("Barack", "Obama", clientData.setUserName, clientData);
  // the fullName property on the clientData was correctly set​
  console.log (clientData.fullName); // Barack Obama
  

• Zapożycz funkcje z apply lub call

  • Borrow Array methods

    Stwórzmy array-like obiekt i Pożycz kilka metod tablicowych do działania na naszym obiekcie podobnym do tablicy.

    // An array-like object: note the non-negative integers used as keys​
    var anArrayLikeObj = {0:"Martin", 1:78, 2:67, 3:["Letta", "Marieta", "Pauline"], length:4 };
    
     // Make a quick copy and save the results in a real array:
     // First parameter sets the "this" value​
     var newArray = Array.prototype.slice.call (anArrayLikeObj, 0);
     console.log (newArray); // ["Martin", 78, 67, Array[3]]​
    
     // Search for "Martin" in the array-like object​
     console.log (Array.prototype.indexOf.call (anArrayLikeObj, "Martin") === -1 ? false : true); // true​
    

    Innym powszechnym przypadkiem jest konwersja arguments do tablicy w następujący sposób

      // We do not define the function with any parameters, yet we can get all the arguments passed to it​
     function doSomething () {
        var args = Array.prototype.slice.call (arguments);
        console.log (args);
     }
    
     doSomething ("Water", "Salt", "Glue"); // ["Water", "Salt", "Glue"]
    

  • Pożycz inne metody

    var gameController = {
         scores  :[20, 34, 55, 46, 77],
         avgScore:null,
         players :[
              {name:"Tommy", playerID:987, age:23},
              {name:"Pau", playerID:87, age:33}
         ]
     }
     var appController = {
         scores  :[900, 845, 809, 950],
         avgScore:null,
         avg     :function () {
                 var sumOfScores = this.scores.reduce (function (prev, cur, index, array) {
                      return prev + cur;
             });
             this.avgScore = sumOfScores / this.scores.length;
         }
       }
       // Note that we are using the apply () method, so the 2nd argument has to be an array​
       appController.avg.apply (gameController);
       console.log (gameController.avgScore); // 46.4​
       // appController.avgScore is still null; it was not updated, only gameController.avgScore was updated​
       console.log (appController.avgScore); // null​
    

• Użyj apply() do wykonania zmiennej arity funkcji

The Math.max jest jednym z przykładów funkcji zmiennej arytmetycznej,

// We can pass any number of arguments to the Math.max () method​
console.log (Math.max (23, 11, 34, 56)); // 56

Ale co jeśli mamy tablicę liczb do przekazania Math.max? Nie możemy tego zrobić. to:

var allNumbers = [23, 11, 34, 56];
// We cannot pass an array of numbers to the the Math.max method like this​
console.log (Math.max (allNumbers)); // NaN

Tutaj metoda apply () pomaga nam wykonywać zmienne funkcje. Zamiast powyższego, musimy przekazać tablicę liczb używając apply () w ten sposób:

var allNumbers = [23, 11, 34, 56];
// Using the apply () method, we can pass the array of numbers:
console.log (Math.max.apply (null, allNumbers)); // 56

Bind : wiąże funkcję z podaną wartością i kontekstem, ale nie wykonuje funkcji. Aby wykonać funkcję, musisz ją wywołać.

Call : wykonuje funkcję z podanym kontekstem i parametrem.

Apply : wykonuje funkcję z podanym kontekstem i parametr jako tablica .

Wywołanie / zastosowanie wykonuje funkcję natychmiast:

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

Bind nie wykonuje funkcji od razu, ale zwraca wrapped apply function (do późniejszego wykonania):

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

• Call wywołuje funkcję i pozwala na przekazywanie argumentów jeden po drugim.
• Apply wywołuje funkcję i pozwala przekazać argumenty jako tablicę.
• Bind zwraca nową funkcję, pozwalającą na przekazanie tej tablicy i dowolnej liczby argumentów.

Wywołanie apply i bind. i jak one się różnią.

Naucz się wywoływać i aplikować używając codziennej terminologii.

Masz trzy samochody your_scooter , your_car and your_jet które zaczynają się z tego samego mechanizmu (metody). Stworzyliśmy obiekt automobile za pomocą metody 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");
    }
}

Lets understand when is call and apply used. Załóżmy, że jesteś inżynierem i masz your_scooter, your_car i your_jet które nie pochodzą z push_button_engine_start i chcesz użyć trzeciego party push_button_engineStart.

Jeśli uruchomisz następujące linie kodu, będą one wyświetlać błąd. Dlaczego?

//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);

Tak więc powyższy przykład z powodzeniem daje your_scooter, your_car, your_jet funkcję z obiektu automobile.

Zanurzmy się głębiej Tutaj podzielimy powyższą linię kodu. automobile.push_button_engineStart pomaga nam uzyskać metodę.

Dalej używamy apply lub call używając notacji kropkowej. automobile.push_button_engineStart.apply()

Teraz apply I call accept dwa parametry.

1. kontekst
2. argumenty

Więc tutaj ustawiamy kontekst w końcowej linijce kodu.

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

Różnica między wywołaniem a apply polega na tym, że apply akceptuje parametry w postaci tablicy, podczas gdy call może po prostu zaakceptować oddzieloną przecinkami listę argumentów.

Co to jest funkcja Bind JS?

Funkcja bind jest w zasadzie, która wiąże kontekst czegoś, a następnie przechowuje go w zmiennej do wykonania na późniejszym etapie.

Uczyńmy nasz poprzedni przykład jeszcze lepszym. Wcześniej użyliśmy metody należącej do obiektu samochodowego i użyliśmy jej do wyposażenia your_car, your_jet and your_scooter. Teraz wyobraźmy sobie, że chcemy dać oddzielną push_button_engineStart osobno, aby uruchomić nasze samochody indywidualnie na dowolnym późniejszym etapie wykonania, jaki sobie życzymy.

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);

nadal nie jesteś zadowolony?

Niech będzie jasne jak łza. Czas eksperymentować. Wrócimy do wywołania i zastosowania funkcji aplikacji i spróbuj zapisać wartość funkcji jako referencję.

Poniższy eksperyment nie powiedzie się, ponieważ wywołanie call I apply jest wywoływane natychmiast, dlatego nigdy nie dojdziemy do etapu przechowywania referencji w zmiennej, gdzie funkcja bind kradnie show

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

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

Wyobraź sobie, bind nie jest dostępny. można go łatwo skonstruować w następujący sposób:

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

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

bindHelper(arguments);

    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;

Myślę, że te same miejsca są: wszystkie z nich mogą zmienić tę wartość funkcji.Ich różnice są następujące: funkcja bind zwróci nową funkcję w wyniku; metody call I apply wykonają funkcję natychmiast, ale apply może zaakceptować tablicę jako params i przetworzy rozdzieloną tablicę.A także funkcja bind może być Currying.

Funkcja Bind powinna być używana, gdy chcemy przypisać funkcję ze szczególnym kontekstem np.

var demo = {
           getValue : function(){ 
             console.log('demo object get value       function') 
            }
           setValue : function(){  
              setTimeout(this.getValue.bind(this),1000)           
           }
 }

W powyższym przykładzie jeśli wywołamy demo.funkcja setValue () i przekazać to.funkcja getValue bezpośrednio wtedy nie wywołuje demo.funkcja setValue bezpośrednio, ponieważ to w setTimeout odnosi się do obiektu window, więc musimy przekazać do tego kontekst obiektu demo.funkcja getValue przy użyciu bind. to znaczy, że przekazujemy tylko funkcję z kontekstem obiektu demo, a nie wywołujemy funkcja.

Hope u understand .

Aby uzyskać więcej informacji, zapoznaj się z javascript bind function know in detail