Une introduction détaillée à l'utilisation de la méthode bind() en JavaScript pour rendre le code plus propre

Il y a quelques semaines, j'ai écrit sur la façon de désactiver les effets de l'appel de fonctions asynchrones en boucle et sur quelques façons de résoudre ce problème.

Dans mon récent codage, j'ai découvert un moyen plus simple. Dans le processus, il élimine les fonctions anonymes et supprime l'erreur de peluchage "Ne pas écrire de fonctions dans des boucles".

Vous voyez, j'ai expérimenté bind() en JavaScript. Il s'avère que nous pouvons utiliser bind dans un certain nombre de situations, notamment pour résoudre le problème de closure que j'ai mentionné il y a quelques semaines.

Qu'est-ce que bind() ?

La fonction bind a été récemment ajoutée à la spécification JavaScript, elle ne fonctionnera donc que sur les derniers navigateurs. Vous pouvez consulter la matrice de compatibilité pour voir quels navigateurs implémentent bind() et d'autres fonctionnalités JavaScript. J'ai regardé attentivement la liste et aucun des navigateurs qui m'intéressent ne prend en charge bind(). Bien entendu, votre situation peut être différente.

Ce que bind fait, c'est encapsuler automatiquement la fonction dans sa propre fermeture, afin que nous puissions lier le contexte (ce mot-clé) et une série de paramètres à la fonction d'origine.

Vous obtenez un autre pointeur de fonction.

function add(a,b){
    return a + b;
}
var newFoo = add.bind(this,3,4);

Notez que non seulement nous regroupons cela dans la fonction foo(), mais que nous regroupons également deux paramètres. Ainsi, lorsque nous appellerons newFoo(), la valeur de retour sera 7.

Mais que se passe-t-il si nous modifions les paramètres avant d'appeler newFoo ?

Modifiez le paramètre de liaison

Si nous utilisons une variable pour lier le paramètre à foo(), puis modifions la variable avant d'appeler newFoo(), que pensez-vous que la valeur va changer ?

function add(a,b){
    return a + b;
}
var a = 3;
var b = 4;
var newFoo = add.bind(this,a, b);
a = 6;
b = 7;
console.log(newFoo());

La valeur de retour est toujours 7, car bind() lie la valeur du paramètre, pas la valeur de la variable réelle.

C'est une bonne nouvelle, comme je l'ai dit, nous pouvons profiter de cet énorme avantage dans notre code. Cependant, là où cela m'est le plus utile, c'est dans les rappels.

liaison et rappels

Rappelez-vous de cet article qu'une de nos solutions pour gérer les rappels en boucle était de créer des fonctions anonymes autour des fonctions que nous voulions appeler.

for(var i = 0;i < 10;i++){
    (function(ii){
        setTimeout(function(){
            console.log(ii);
        },1000);
    })(i);

Mais nous pouvons utiliser bind pour simplifier grandement le code.

function consoleLog(i){
  console.log(i);
}
for(var i = 0;i < 10;i++){
    setTimeout(consoleLog.bind(this,i),1000);
}

En effet, chaque appel à bind donnera un nouveau pointeur de fonction et laissera la fonction d'origine inchangée.

En même temps, nous avons également supprimé l'erreur de linting "Ne pas écrire de fonctions dans les boucles" car nous n'avons pas créé la fonction dans la boucle, nous avons juste pointé la fonction que nous avons créée en dehors de la boucle.

liaison pour les gestionnaires d'événements

bind()Un autre endroit où vous pouvez rendre votre code plus propre est dans les gestionnaires d'événements. Tout le monde sait, ou devrait savoir, que lorsqu'un gestionnaire d'événements est appelé, il accède au contexte dans lequel l'événement a été généré, et non à l'objet dans lequel le gestionnaire d'événements a été créé. En utilisant bind, vous pouvez être sûr que la fonction sera accessible dans le bon contexte.

function ClassName(){
   this.eventHandler = (function(){
   }).bind(this);
}

Je ne dis pas que vous devriez écrire du code comme ça, c'est juste pour illustrer ce point.

Curry

Quoi ? !

D'accord. Je serai le premier à admettre que mes connaissances en programmation fonctionnelle sont limitées. La meilleure définition que je puisse donner du curry est qu’il permet de transmettre des paramètres en plusieurs étapes.

En utilisant bind, nous pouvons écrire du code comme celui-ci pour implémenter Currying :

function add(a,b,c) {
  return a+b+c;
}
var addAgain = add.bind(this, 1, 2);
var result = addAgain(3);

Ce qui précède est une introduction détaillée à l'utilisation de la méthode bind() en JavaScript pour rendre le code plus propre. Veuillez faire attention au site Web PHP chinois (www.php.cn) pour le contenu !