Bind crée une nouvelle fonction qui aura this ensemble sur le premier paramètre passé à bind() .

Voici un exemple qui montre comment utiliser bind pour passer une méthode membre autour de celle qui a la bonne:

 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 

Ce qui imprime:

 OK clicked undefined clicked OK clicked 

Vous pouvez également ajouter des paramètres supplémentaires après le 1er ( this ) paramètre et la bind passera ces valeurs à la fonction d'origine. Tous les paramètres supplémentaires que vous transmettez plus tard à la fonction liée seront transmis après les paramètres liés:

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

Ce qui imprime:

 15 

Consultez la fonction JavaScript pour plus d'informations et des exemples interactifs.

Bind permet-

• Définissez la valeur de "ceci" sur un objet spécifique. Cela devient très utile car parfois ce n'est pas ce qui est prévu.
• Méthodes de réutilisation
• Curry une fonction

Par exemple, vous avez une fonction pour déduire les frais de club mensuels

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

Maintenant, vous souhaitez réutiliser cette fonction pour un membre du club différent. Notez que les frais mensuels varieront d'un membre à l'autre.

Imaginons que Rachel ait un solde de 500 et une cotisation mensuelle de 90.

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

Maintenant, créez une fonction qui peut être utilisée encore et encore pour déduire les frais de son compte chaque mois

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

Maintenant, la même fonction getMonthlyFee pourrait être utilisée pour un autre membre avec des frais d'adhésion différents. Par exemple, Ross Geller a un solde de 250 et un tarif mensuel de 25

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

L'utilisation la plus simple de bind () est de créer une fonction qui, peu importe comment elle s'appelle, est appelée avec une valeur particulière de cette valeur.

 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 

Veuillez vous référer à ce lien pour plus d'informations

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

Du MDN docs sur Function.prototype.bind() :

La méthode bind () crée une nouvelle fonction qui, lorsqu'elle est appelée, a son mot-clé défini à la valeur fournie, avec une séquence d'arguments donnée précédant celle fournie lorsque la nouvelle fonction est appelée.

Alors qu'est-ce que cela signifie?!

Eh bien, prenons une fonction qui ressemble à ceci:

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

Maintenant, prenons un objet qui ressemble à ceci:

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

Nous pouvons lier notre fonction à notre objet comme ceci:

 Obj.log = logProp.bind(Obj); 

Maintenant, nous pouvons exécuter Obj.log n'importe où dans notre code:

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

Cela fonctionne, parce que nous lions la valeur de this à notre objet Obj .

Là où cela devient vraiment intéressant, c'est lorsque vous liez non seulement une valeur pour this , mais aussi pour son argument:

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

Nous pouvons maintenant le faire:

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

Contrairement à Obj.log , nous ne devons pas passer x ou y , parce que nous avons passé ces valeurs lorsque nous avons fait notre liaison.

Je vais vous expliquer lier théoriquement aussi bien que pratiquement

Bind in javascript est une méthode – Function.prototype.bind. Bind est une méthode. Il est appelé un prototype de fonction. Cette méthode crée une fonction dont le corps est similaire à la fonction sur laquelle il est appelé, mais le «ceci» fait référence au premier paramètre passé à la méthode bind. Sa syntaxe est

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

Exemple:–

  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; 

Comme mentionné, Function.bind() vous permet de spécifier le contexte dans lequel la fonction s'exécutera (c'est-à-dire, il vous permet de passer dans quel objet résoudra le mot clé dans le corps de la fonction.

Quelques méthodes analogiques de la méthode toolkit qui effectuent un service similaire:

JQuery.proxy ()

Dojo.hitch ()

Création d'une nouvelle fonction en liant les arguments aux valeurs

La méthode bind crée une nouvelle fonction à partir d'une autre fonction avec un ou plusieurs arguments liés à des valeurs spécifiques, y compris l'implicite de this argument.

Application partielle

C'est un exemple d' application partielle . Normalement, nous fournissons une fonction avec tous ses arguments qui donnent une valeur. C'est ce qu'on appelle l'application de fonction. Nous appliquons la fonction à ses arguments.

Une fonction d'ordre supérieur (HOF)

L'application partielle est un exemple d'une fonction d'ordre supérieur (HOF) car elle produit une nouvelle fonction avec moins d'argument.

Relier plusieurs arguments

Vous pouvez utiliser bind pour transformer des fonctions avec plusieurs arguments en nouvelles fonctions.

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

La méthode bind () crée une nouvelle instance de fonction dont cette valeur est liée à la valeur passée dans bind (). Par exemple:

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

Ici, une nouvelle fonction appelée objectSayColor () est créée à partir de sayColor () en appelant bind () et en passant dans l'objet o. La fonction objectSayColor () a une valeur équivalente à o, alors appeler la fonction, même en tant qu'appel global, entraîne l'affichage de la chaîne "bleu".

Référence: Nicholas C. Zakas – PROFESSIONAL JAVASCRIPT® POUR LES DÉVELOPPES WEB

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

La fonction de liaison crée une nouvelle fonction avec le même corps de fonction que la fonction à laquelle elle appelle. On l'appelle avec cet argument. Par conséquent, nous utilisons bind fun. : Lorsque chaque fois qu'une nouvelle instance est créée et que nous devons utiliser la première instance initiale, nous utilisons bind fun.We ne peut pas remplacer le bind fun.simply, il stocke l'objet initial de la classe.

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