Quelle est l'utilisation de la méthode JavaScript 'bind'?
Quelle est l'utilisation de bind() en JavaScript?
Bind crée une nouvelle fonction pour laquelle this est défini sur le premier paramètre transmis à bind().
Voici un exemple qui montre comment utiliser bind pour transmettre une méthode membre qui a le bon 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
Qui imprime:
OK clicked
undefined clicked
OK clicked
Vous pouvez également ajouter des paramètres supplémentaires après le premier (this) et bind transmettent ces valeurs à la fonction d'origine. Tous les paramètres supplémentaires que vous transmettez ultérieurement à 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));
Qui imprime:
15
Découvrez JavaScript Function bind pour plus d'informations et des exemples interactifs.
Mise à jour: ECMAScript 2015 ajoute le support pour les fonctions =>. Les fonctions => sont plus compactes et ne modifient pas le pointeur this de leur portée de définition. Vous n'aurez donc peut-être pas besoin d'utiliser bind() aussi souvent. Par exemple, si vous vouliez qu'une fonction sur Button à partir du premier exemple connecte le rappel click à un événement DOM, voici toutes les manières possibles de le faire:
Button.prototype.hookEvent(element) {
// Use bind() to ensure 'this' is the 'this' inside click()
element.addEventListener('click', this.click.bind(this));
};
Ou:
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() });
}
Ou:
Button.prototype.hookEvent(element) {
// => functions do not change 'this', so you can use it directly
element.addEventListener('click', () => this.click());
}
L’utilisation la plus simple de bind() consiste à créer une fonction qui, quelle que soit sa dénomination, est appelée avec une valeur this particulière.
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
S'il vous plaît se référer ce lien pour plus d'informations
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
bind permet-
- définissez la valeur de "this" sur un objet spécifique. Cela devient très utile car parfois this n'est pas ce à quoi on s'attend.
- méthodes de réutilisation
- curry une fonction
Par exemple, vous avez une fonction pour déduire les frais mensuels du club
function getMonthlyFee(fee){
var remaining = this.total - fee;
this.total = remaining;
return this.name +' remaining balance:'+remaining;
}
Maintenant, vous voulez réutiliser cette fonction pour un autre membre du club. Notez que les frais mensuels varient d'un membre à l'autre.
Imaginons que Rachel ait un solde de 500 dollars et une cotisation mensuelle de 90.
var rachel = {name:'Rachel Green', total:500};
Maintenant, créez une fonction qui peut être utilisée à plusieurs reprises pour déduire les frais de son compte tous les mois.
//bind
var getRachelFee = getMonthlyFee.bind(rachel, 90);
//deduct
getRachelFee();//Rachel Green remaining balance:410
getRachelFee();//Rachel Green remaining balance:320
Maintenant, la même fonction getMonthlyFee peut ê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 des frais mensuels de 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
De les documents MDN sur Function.prototype.bind():
La méthode bind () crée une nouvelle fonction qui, lorsqu'elle est appelée, a pour mot clé this la valeur fournie, avec une séquence d'arguments donnée précédant n'importe quel paramètre. à condition que la nouvelle fonction soit 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 car nous avons lié la valeur de this à notre objet Obj.
Cela devient vraiment intéressant lorsque l’on lie non seulement une valeur pour this, mais aussi pour son argument prop:
Obj.logX = logProp.bind(Obj, 'x');
Obj.logY = logProp.bind(Obj, 'y');
Nous pouvons maintenant faire ceci:
Obj.logX(); // Output : 5
Obj.logY(); // Output : 10
Contrairement à Obj.log, nous n'avons pas à passer x ou y, car nous avons transmis ces valeurs lors de la liaison.
Les variables ont des portées locales et globales. Supposons que nous ayons deux variables du même nom. L'un est défini globalement et l'autre est défini à l'intérieur d'une fermeture de fonction et nous voulons obtenir la valeur de variable qui se trouve à l'intérieur de la fermeture de fonction. Dans ce cas, nous utilisons cette méthode bind (). Veuillez voir l'exemple simple ci-dessous:
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();<p id="demo1">0</p>
<p id="demo2">0</p>Je vais expliquer lier théoriquement aussi bien que pratiquement
bind en javascript est une méthode - Function.prototype.bind. bind est une méthode. Il est appelé prototype de fonction. Cette méthode crée une fonction dont le corps est similaire à la fonction sur laquelle elle est appelée, mais le "this" fait référence au premier paramètre transmis à 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;
Sommaire:
La méthode bind() prend un objet comme premier argument et crée une nouvelle fonction. Lorsque la fonction est appelée, la valeur de this dans le corps de la fonction sera l'objet qui a été transmis en tant qu'argument dans la fonction bind().
Comment this fonctionne-t-il dans JS quand même?
La valeur de this en javascript dépend de l'objet auquel la fonction est appelée. La valeur de this fait toujours référence à l'objet à gauche du point d'où la fonction est appelée. Dans le cas de la portée globale, il s'agit de window (ou global dans nodeJS). Seuls call, apply et bind peuvent modifier la reliure différemment. Voici un exemple pour montrer comment fonctionne le mot-clé this:
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 loggedComment est-ce que bind est utilisé?
Bind peut aider à surmonter les difficultés avec le mot clé this en ayant un objet fixe auquel this fera référence. Par exemple:
var name = 'globalName';
const obj = {
name: 'myName',
sayName: function () { console.log(this.name);}
}
const say = obj.sayName; // we are merely storing the function the value of this isn't magically transferred
say(); // now because this function is executed in global scope this will refer to the global var
const boundSay = obj.sayName.bind(obj); // now the value of this is bound to the obj object
boundSay(); // Now this will refer to the name in the obj object: 'myName'Une fois que la fonction est liée à une valeur this particulière, nous pouvons la transmettre et même la placer dans des propriétés d'autres objets. La valeur de this restera la même.
Création d'une nouvelle fonction en liant des arguments à des 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'argument implicite this.
Application partielle
Ceci est un exemple de application partielle . Normalement, nous fournissons une fonction avec tous ses arguments qui donne une valeur. Ceci est connu sous le nom d'application de fonction. Nous appliquons la fonction à ses arguments.
Une fonction d'ordre supérieur (HOF)
L'application partielle est un exemple de fonction d'ordre supérieur (HOF) car elle génère une nouvelle fonction avec un nombre d'arguments inférieur.
Liaison de plusieurs arguments
Vous pouvez utiliser bind pour transformer des fonctions à plusieurs arguments en nouvelles fonctions.
function multiply(x, y) {
return x * y;
}
let multiplyBy10 = multiply.bind(null, 10);
console.log(multiplyBy10(5));Conversion de la méthode d'instance en fonction statique
Dans le cas d'utilisation le plus courant, lorsqu'elle est appelée avec un argument, la méthode bind crée une nouvelle fonction dont la valeur this est liée à une valeur spécifique. En effet, cela transforme une méthode d'instance en une méthode statique.
function Multiplier(factor) {
this.factor = factor;
}
Multiplier.prototype.multiply = function(x) {
return this.factor * x;
}
function ApplyFunction(func, value) {
return func(value);
}
var mul = new Multiplier(5);
// Produces garbage (NaN) because multiplying "undefined" by 10
console.log(ApplyFunction(mul.multiply, 10));
// Produces expected result: 50
console.log(ApplyFunction(mul.multiply.bind(mul), 10));Implémentation d'un rappel à état
L'exemple suivant montre comment l'utilisation de la liaison de this peut permettre à une méthode d'objet d'agir comme un rappel pouvant facilement mettre à jour l'état d'un objet.
function ButtonPressedLogger()
{
this.count = 0;
this.onPressed = function() {
this.count++;
console.log("pressed a button " + this.count + " times");
}
for (let d of document.getElementsByTagName("button"))
d.onclick = this.onPressed.bind(this);
}
new ButtonPressedLogger(); <button>press me</button>
<button>no press me</button>La méthode bind () crée une nouvelle instance de fonction dont cette valeur est liée à la valeur transmise à 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 transmettant l'objet o. La fonction objectSayColor () ayant cette valeur équivalente à o, l'appel de la fonction, même en tant qu'appel global, entraîne l'affichage de la chaîne "bleue".
Référence: Nicholas C. Zakas - PROFESSIONNEL JAVASCRIPT® POUR LES DÉVELOPPEURS WEB
Comme mentionné, Function.bind() vous permet de spécifier le contexte dans lequel la fonction sera exécutée (c'est-à-dire, il vous permet de spécifier l'objet dans lequel le mot clé this sera résolu dans le corps de la fonction.
Quelques méthodes analogiques d'API de boîte à outils réalisant un service similaire:
/**
* 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 bind crée une nouvelle fonction avec le même corps que la fonction qu'elle appelle. Elle est appelée avec l'argument this .why nous utilisons bind fun. : quand à chaque fois qu'une nouvelle instance est créée et que nous devons utiliser la première instance initiale, nous utilisons bind fun. Nous ne pouvons pas remplacer la liaison fun.simply, elle stocke l'objet initial de la classe.
setInterval(this.animate_to.bind(this), 1000/this.difference);