Ik weet al dat applyen callvergelijkbare functies zijn diethisinstellen (context van een functie).

Het verschil zit in de manier waarop we de argumenten verzenden (handmatig versus array)

Vraag:

Maar wanneer moet ik de methode bind()gebruiken?

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

Antwoord 1, autoriteit 100%

Ik heb een tijdje geleden deze vergelijking gemaakt tussen functieobjecten, functieaanroepen, call/applyen bind:

.bindstelt u in staat om de thiswaarde nuin te stellen terwijl u de functie in de toekomst, omdat het een nieuw functie-object retourneert.

Antwoord 2, autoriteit 95%

Gebruik .bind()als je wilt dat die functie later wordt aangeroepen met een bepaalde context, handig bij evenementen. Gebruik .call()of .apply()wanneer u de functie onmiddellijk wilt aanroepen en de context wilt wijzigen.

Bel/pas de functie onmiddellijk toe, terwijl bindeen functie retourneert die, wanneer deze later wordt uitgevoerd, de juiste context heeft voor het aanroepen van de oorspronkelijke functie. Op deze manier kunt u de context behouden in asynchrone callbacks en gebeurtenissen.

Ik doe dit veel:

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

Ik gebruik het uitgebreid in Node.js voor asynchrone callbacks waarvoor ik een lidmethode wil doorgeven, maar wil toch dat de context de instantie is die de asynchrone actie startte.

Een eenvoudige, naïeve implementatie van bind zou zijn als:

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

Er is meer aan de hand (zoals het doorgeven van andere argumenten), maar je kunt er meer over lezen en de echte implementatie zien op de MDN.

Hopelijk helpt dit.

Antwoord 3, autoriteit 90%

Ze voegen allemaal dittoe aan functie (of object) en het verschil zit in de functieaanroep (zie hieronder).

aanroepvoegt dittoe aan de functie en voert de functie onmiddellijk uit:

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"

bindkoppelt thisaan functie en moet apart worden aangeroepen als volgt:

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"

of zoals dit:

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

applylijkt op callbehalve dat er een array-achtig object voor nodig is in plaats van de argumenten één voor één op te sommen:

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"                                     

Antwoord 4, autoriteit 93%

Antwoord in EENVOUDIGSTE vorm

• Callroept de functie op en stelt u in staat argumenten één voor één in te voeren
  een.
• Toepassenroept de functie op en stelt u in staat argumenten door te geven
  als een array.
• Bindretourneert een nieuwe functie, waarmee u een . kunt doorgeven
  deze array en een willekeurig aantal argumenten.

Toepassen vs. Call vs. Bind-voorbeelden

Bel

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

Toepassen

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

Inbinden

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

Wanneer elk te gebruiken

Bellen en solliciteren zijn redelijk uitwisselbaar. Bepaal gewoon of het gemakkelijker is om een array of een door komma’s gescheiden lijst met argumenten in te sturen.

Ik onthoud altijd welke welke is door te onthouden dat Oproep voor komma is (gescheiden lijst) en Toepassen voor Array is.

Inbinden is een beetje anders. Het geeft een nieuwe functie terug. Bellen en Toepassen voeren de huidige functie onmiddellijk uit.

Bind is geweldig voor veel dingen. We kunnen het gebruiken om te curry-functies zoals in het bovenstaande voorbeeld. We kunnen een eenvoudige hallo-functie maken en veranderen in een hellojon of hellokellelly. We kunnen het ook gebruiken voor evenementen zoals OnClick, waar we niet weten wanneer ze zullen worden ontslagen, maar we weten welke context dat we willen.

Referentie: codeplanet.io

Antwoord 5, autoriteit 24%

Hiermee kan de waarde voor thisworden ingesteld, onafhankelijk van hoe de functie wordt aangeroepen. Dit is erg handig bij het werken met terugbellen:

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

Als u hetzelfde resultaat wilt bereiken met callziet u er als volgt uit:

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

6, Autoriteit 11%

Bind : het bindt de functie met opgegeven waarde en context, maar het voert de functie niet uit. Om de functie uit te voeren, moet u de functie bellen.

bel : het voert de functie uit met verstrekte context en parameter.

toepassen: het voert de functie uit met de verstrekte context en
parameter als array.

Antwoord 7, autoriteit 9%

Het belangrijkste concept achter al deze methoden is Function burrowing.

Het lenen van functies stelt ons in staat om de methoden van het ene object op een ander object te gebruiken zonder een kopie van die methode te hoeven maken en deze op twee verschillende plaatsen te bewaren. Het wordt bereikt door het gebruik van . telefoongesprek() , . toepassen() , of . bind() , die allemaal bestaan om dit expliciet in te stellen op de methode die we lenen

1. Callroept de functie onmiddellijk op en stelt u in staat argumenten één voor één in te voeren
   een
2. Toepassenroept de functie onmiddellijk op en stelt u in staat om argumenten door te geven
   als een array.
3. Bindretourneert een nieuwe functie en u kunt deze op elk gewenst moment aanroepen/aanroepen door een functie aan te roepen.

Hieronder staat een voorbeeld van al deze methoden

let name =  {
    firstname : "Arham",
    lastname : "Chowdhury",
}
printFullName =  function(hometown,company){
    console.log(this.firstname + " " + this.lastname +", " + hometown + ", " + company)
}

BEL

het eerste argument, bijv. naam binnen aanroepmethode is altijd een verwijzing
naar (deze) variabele en de laatste zal functievariabele zijn

printFullName.call(name,"Mumbai","Taufa");     //Arham Chowdhury, Mumbai, Taufa

TOEPASSEN

apply-methode is hetzelfde als de call-methode
het enige verschil is dat de functieargumenten worden doorgegeven in de arraylijst

printFullName.apply(name, ["Mumbai","Taufa"]);     //Arham Chowdhury, Mumbai, Taufa

binden

Bindmethode is hetzelfde als oproep, behalve dat de binding een functie retourneert die later kan worden gebruikt door het aan te roepen (roept het niet onmiddellijk)

let printMyNAme = printFullName.bind(name,"Mumbai","Taufa");
printMyNAme();      //Arham Chowdhury, Mumbai, Taufa

PrintMyName () is de functie die de functie

roept

Hieronder staat de link voor JSFiddle

https://codepen.io/arham11/pen/vynqexp

Antwoord 8, autoriteit 5%

Het fundamentele verschil tussen Bellen, Toepassen en Binden is:

Bind wordt gebruikt als u wilt dat uw uitvoeringscontext later in beeld komt.

Bijvoorbeeld:

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**

Stel dat ik deze methode in een andere variabele wil gebruiken

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

Als u de referentie van auto in een andere variabele wilt gebruiken, moet u

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

Laten we het hebben over een uitgebreider gebruik van de bindfunctie

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

Waarom? Omdat func nu bind is met nummer 1, als we in dat geval geen bind gebruiken, verwijst het naar globaal object.

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

Call, Apply worden gebruikt wanneer u de instructie tegelijkertijd wilt uitvoeren.

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

Antwoord 9, autoriteit 4%

call/applyvoert de functie onmiddellijk uit:

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

bindvoert de functie niet onmiddellijk uit, maar retourneert de ingepakte apply-functie (voor latere uitvoering):

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

Antwoord 10, autoriteit 3%

Syntaxis

• aanroepen(thisArg, arg1, arg2, …)
• toepassen(thisArg, argsArray)
• bind(thisArg[, arg1[, arg2[, …]]])

Hier

• thisArg is het object
• argArray is een array-object
• arg1, arg2, arg3,… zijn aanvullende argumenten

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

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

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

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

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)

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

   name: "Lokamn",
    dob: 12,
    anotherPerson: {
        name: "Pappu",
        dob: 12,
        print2: function () {
            console.log(this)
        }
    }
}
var bindFunction = person.anotherPerson.print2.bind(person)
 bindFunction()

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

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

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

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

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;

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