Uso del metodo “bind” di JavaScript

Qual è l’uso di bind() in JavaScript?

Bind crea una nuova funzione che avrà this set sul primo parametro passato a bind() .

Ecco un esempio che mostra come usare bind per passare un metodo membro attorno a quello che ha il corretto this :

 var Button = function(content) { this.content = content; }; Button.prototype.click = function() { console.log(this.content + ' clicked'); }; var myButton = new Button('OK'); myButton.click(); var looseClick = myButton.click; looseClick(); // not bound, 'this' is not myButton - it is the global object var boundClick = myButton.click.bind(myButton); boundClick(); // bound, 'this' is myButton 

Che stampa:

 OK clicked undefined clicked OK clicked 

È inoltre ansible aggiungere ulteriori parametri dopo il 1 ° ( this ) parametro e il bind passerà in tali valori alla funzione originale. Tutti i parametri aggiuntivi che in seguito verranno passati alla funzione associata verranno passati dopo i parametri associati:

 // Example showing binding some parameters var sum = function(a, b) { return a + b; }; var add5 = sum.bind(null, 5); console.log(add5(10)); 

Che stampa:

 15 

Scopri JavaScript Function bind per maggiori informazioni ed esempi interattivi.

Aggiornamento: ECMAScript 2015 aggiunge il supporto per => funzioni. => funzioni sono più compatte e non cambiano this puntatore dal loro ambito di definizione, quindi potresti non aver bisogno di usare bind() come spesso. Ad esempio, se si desiderava una funzione su Button dal primo esempio per colbind la richiamata di click a un evento DOM, i seguenti sono tutti modi validi per farlo:

 Button.prototype.hookEvent(element) { // Use bind() to ensure 'this' is the 'this' inside click() element.addEventListener('click', this.click.bind(this)); }; 

O:

 Button.prototype.hookEvent(element) { // Use a new variable for 'this' since 'this' inside the function // will not be the 'this' inside hookEvent() var me = this; element.addEventListener('click', function() { me.click() }); } 

O:

 Button.prototype.hookEvent(element) { // => functions do not change 'this', so you can use it directly element.addEventListener('click', () => this.click()); } 

legami consentiti

  • imposta il valore di “this” su un object specifico. Questo diventa molto utile perché a volte questo non è ciò che è inteso.
  • riutilizzare i metodi
  • curry una funzione

Ad esempio, hai una funzione per detrarre le quote mensili del club

 function getMonthlyFee(fee){ var remaining = this.total - fee; this.total = remaining; return this.name +' remaining balance:'+remaining; } 

Ora si desidera riutilizzare questa funzione per un membro del club diverso. Si noti che la tariffa mensile varia da un membro all’altro.

Immaginiamo che Rachel abbia un saldo di 500 e una quota associativa mensile di 90.

 var rachel = {name:'Rachel Green', total:500}; 

Ora, crea una funzione che può essere utilizzata più e più volte per detrarre la tariffa dal suo account ogni mese

 //bind var getRachelFee = getMonthlyFee.bind(rachel, 90); //deduct getRachelFee();//Rachel Green remaining balance:410 getRachelFee();//Rachel Green remaining balance:320 

Ora, la stessa funzione getMonthlyFee potrebbe essere utilizzata per un altro membro con una quota di iscrizione diversa. Ad esempio, Ross Geller ha un saldo di 250 e una tariffa mensile di 25

 var ross = {name:'Ross Geller', total:250}; //bind var getRossFee = getMonthlyFee.bind(ross, 25); //deduct getRossFee(); //Ross Geller remaining balance:225 getRossFee(); //Ross Geller remaining balance:200 

L’uso più semplice di bind () è di creare una funzione che, indipendentemente da come viene chiamata, viene chiamata con un particolare valore.

 x = 9; var module = { x: 81, getX: function () { return this.x; } }; module.getX(); // 81 var getX = module.getX; getX(); // 9, because in this case, "this" refers to the global object // create a new function with 'this' bound to module var boundGetX = getX.bind(module); boundGetX(); // 81 

Si prega di fare riferimento a questo link per ulteriori informazioni

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

Dai documenti MDN su Function.prototype.bind() :

Il metodo bind () crea una nuova funzione che, quando chiamata, ha la sua parola chiave impostata sul valore fornito, con una data sequenza di argomenti che precede quella fornita quando viene chiamata la nuova funzione.

Che cosa vuol dire?!

Bene, prendiamo una funzione simile a questa:

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

Ora, prendiamo un object che assomiglia a questo:

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

Possiamo bind la nostra funzione al nostro object in questo modo:

 Obj.log = logProp.bind(Obj); 

Ora, possiamo eseguire Obj.log ovunque nel nostro codice:

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

Funziona, perché abbiamo legato il valore di this al nostro object Obj .


Dove diventa davvero interessante, è quando non si associa solo un valore per this , ma anche per il suo argomento prop :

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

Ora possiamo fare questo:

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

A differenza di Obj.log , non dobbiamo passare x o y , perché abbiamo passato quei valori quando abbiamo fatto il nostro binding.

Spiegherò teoricamente sia il binding che praticamente

bind in javascript è un metodo – Function.prototype.bind. il legame è un metodo. È chiamato su prototipo di funzione. Questo metodo crea una funzione il cui corpo è simile alla funzione su cui è chiamato, ma il ‘this’ si riferisce al primo parametro passato al metodo bind. La sua syntax è

  var bindedFunc = Func.bind(thisObj,optionsArg1,optionalArg2,optionalArg3,...); 

Esempio:–

  var checkRange = function(value){ if(typeof value !== "number"){ return false; } else { return value >= this.minimum && value <= this.maximum; } } var range = {minimum:10,maximum:20}; var boundedFunc = checkRange.bind(range); //bounded Function. this refers to range var result = boundedFunc(15); //passing value console.log(result) // will give true; 

Il metodo bind () crea una nuova istanza di funzione il cui valore è associato al valore passato in bind (). Per esempio:

  window.color = "red"; var o = { color: "blue" }; function sayColor(){ alert(this.color); } var objectSayColor = sayColor.bind(o); objectSayColor(); //blue 

Qui, una nuova funzione chiamata objectSayColor () viene creata da sayColor () chiamando bind () e passando nell’object o. La funzione objectSayColor () ha un valore equivalente a o, quindi chiamando la funzione, anche come chiamata globale, viene visualizzata la stringa “blue” visualizzata.

Riferimento: Nicholas C. Zakas – PROFESSIONAL JAVASCRIPT® PER GLI SVILUPPATORI WEB

Creare una nuova funzione legando gli argomenti ai valori

Il metodo bind crea una nuova funzione da un’altra funzione con uno o più argomenti associati a valori specifici, incluso l’argomento implicito.

Applicazione parziale

Questo è un esempio di applicazione parziale . Normalmente forniamo una funzione con tutti i suoi argomenti che produce un valore. Questo è noto come applicazione di funzione. Stiamo applicando la funzione ai suoi argomenti.

Una funzione di ordine superiore (HOF)

L’applicazione parziale è un esempio di una funzione di ordine superiore (HOF) perché produce una nuova funzione con un numero inferiore di argomenti.

Associazione di più argomenti

È ansible utilizzare bind per trasformare le funzioni con più argomenti in nuove funzioni.

 function multiply(x, y) { return x * y; } let multiplyBy10 = multiply.bind(null, 10); console.log(multiplyBy10(5)); 

Le variabili hanno scope locali e globali, supponiamo che abbiamo due variabili con lo stesso nome, una è definita globalmente e un’altra è definita all’interno di una chiusura di funzione e vogliamo chiamare quel valore di variabile che è all’interno della chiusura della funzione, quindi usiamo questo metodo di legatura Si prega di vedere il semplice esempio di seguito:

  var x = 9; // this refers to global "window" object here in the browser var person = { x: 81, getX: function() { return this.x; } }; var y = person.getX; // It will return 9, because it will call global value of x(var x=9). var x2 = y.bind(person); // It will return 81, because it will call local value of x, which is defined in the object called person(x=81). document.getElementById("demo1").innerHTML = y(); document.getElementById("demo2").innerHTML = x2(); 
    

0

0

Come detto, Function.bind() consente di specificare il contesto in cui verrà eseguita la funzione (ovvero, consente di passare in quale object verrà risolta la parola chiave nel corpo della funzione.

Un paio di metodi API analoghi per toolkit che eseguono un servizio simile:

jQuery.proxy ()

Dojo.hitch ()

 /** * Bind is a method inherited from Function.prototype same like call and apply * It basically helps to bind a function to an object's context during initialisation * * */ window.myname = "Jineesh"; var foo = function(){ return this.myname; }; //IE < 8 has issues with this, supported in ecmascript 5 var obj = { myname : "John", fn:foo.bind(window)// binds to window object }; console.log( obj.fn() ); // Returns Jineesh 

Sommario:

Il metodo bind() accetta un object come primo argomento e crea una nuova funzione. Quando viene invocata la funzione, il valore di this nel corpo della funzione sarà l’object che è stato passato come argomento nella funzione bind() .

Come funziona comunque in JS

Il valore di this in javascript dipende sempre da quale object viene chiamata la funzione. Il valore di questo si riferisce sempre all’object rimasto del punto da dove viene chiamata la funzione . Nel caso dell’ambito globale questa è la window (o global in nodeJS ). Solo call , apply e bind può alterare questo legame in modo diverso. Ecco un esempio per mostrare come funziona questa parola chiave:

 let obj = { prop1: 1, func: function () { console.log(this); } } obj.func(); // obj left of the dot so this refers to obj const customFunc = obj.func; // we store the function in the customFunc obj customFunc(); // now the object left of the dot is window, // customFunc() is shorthand for window.customFunc() // Therefore window will be logged 

La funzione bind crea una nuova funzione con lo stesso corpo di funzione della funzione che sta chiamando. Viene chiamata con questo argomento. Perché usiamo bind fun. : ogni volta che viene creata una nuova istanza e dobbiamo utilizzare la prima istanza iniziale, usiamo bind fun.We non è ansible ignorare il binding fun.imply memorizza l’object iniziale della class.

setInterval (this.animate_to.bind (this), 1000 / this.difference);

per i principianti di Javascript con sfondo OOP come me, ho trovato che questa è la spiegazione più semplice da capire,

https://www.youtube.com/watch?v=GhbhD1HR5vk

Puoi saltare alle 5:00, ma ti consiglio di guardarlo dall’inizio.

bind è una funzione disponibile in prototipo di script java, poiché il nome suggerito da bind viene utilizzato per associare la chiamata di funzione al contesto di cui si ha a che fare, ad esempio:

  var rateOfInterest='4%'; var axisBank= { rateOfInterest:'10%', getRateOfInterest:function() { return this.rateOfInterest; } } axisBank.getRateOfInterest() //'10%' let knowAxisBankInterest=axisBank.getRateOfInterest // when you want to assign the function call to a varaible we use this syntax knowAxisBankInterest(); // you will get output as '4%' here by default the function is called wrt global context let knowExactAxisBankInterest=knowAxisBankInterest.bind(axisBank); //so here we need bind function call to its local context knowExactAxisBankInterest() // '10%'