Explication détaillée de la façon d'utiliser le code de liaison de fonction pour l'interaction javascript

Liaison de fonction

Dans l'interaction entre JavaScript et DOM, il est souvent nécessaire d'utiliser la liaison de fonction Définir une fonction puis la lier à un élément DOM spécifique ou. Sur un programme déclencheur d'événements, les fonctions de liaison sont souvent utilisées avec des fonctions de rappel et des gestionnaires d'événements afin de transmettre des fonctions en tant que variables tout en conservant l'environnement d'exécution du code

<button id="btn">按钮</button>
<script>      
  var handler={
    message:"Event handled.",
    handlerFun:function(){
      alert(this.message);
    }
  };
btn.onclick = handler.handlerFun;
</script>

Le code ci-dessus crée un objet gestionnaire. La méthode handler.handlerFun() est affectée en tant que gestionnaire d'événements pour un bouton DOM. Lorsque le bouton est enfoncé, cette fonction est appelée et une boîte d'alerte s'affiche. Bien qu'il semble que la boîte d'avertissement doive afficher Événement géré, elle affiche en réalité undefiend. Le problème est que l'environnement de handler.handleClick() n'est pas enregistré, donc cet objet finit par pointer vers le bouton DOM au lieu de handler

Vous pouvez utiliser des fermetures pour corriger ce problème

<button id="btn">按钮</button>
<script>      
var handler={
  message:"Event handled.",
  handlerFun:function(){
    alert(this.message);
  }
};
btn.onclick = function(){
  handler.handlerFun();  
}
</script>

Bien sûr, il s'agit d'une solution spécifique à ce scénario, la création de plusieurs fermetures peut rendre le code difficile à comprendre et à déboguer. Une meilleure approche consiste à utiliser la liaison de fonction

Une fonction de liaison simple bind() prend une fonction et un environnement et renvoie une fonction qui appelle la fonction donnée dans l'environnement donné, et. passer tous les paramètres intacts

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

Cette fonction semble simple, mais sa fonction est très puissante. Une fermeture est créée dans bind(). La fermeture utilise apply() pour appeler la fonction entrante et transmet l'objet contextuel et les paramètres à apply(). Lorsque la fonction renvoyée est appelée, elle exécutera la fonction passée dans l'environnement donné et donnera tous les paramètres.

<button id="btn">按钮</button>
<script> 
function bind(fn,context){
  return function(){
    return fn.apply(context,arguments);
  }
}     
var handler={
  message:"Event handled.",
  handlerFun:function(){
    alert(this.message);
  }
};
btn.onclick = bind(handler.handlerFun,handler);
</script>

ECMAScript5 définit une méthode native bind() pour toutes les fonctions, simplifiant encore davantage l'opération.

Tant qu'un pointeur de fonction est passé en tant que valeur et que la fonction doit être exécutée dans un environnement spécifique, l'utilité de la fonction liée est mise en évidence. Ils sont principalement utilisés dans les gestionnaires d'événements et setTimeout() et setInterval(). Cependant, les fonctions liées ont plus de temps système que les fonctions normales, elles nécessitent plus de mémoire et, comme les appels de fonctions multiples sont légèrement plus lents, il est préférable de les utiliser uniquement lorsque cela est nécessaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!