Compréhension approfondie de la méthode Function.prototype.bind() en JS

Avant-propos

La liaison de fonction est probablement le point auquel tout le monde prête le moins d'attention lors de l'utilisation de JavaScript, mais lorsque vous réalisez que vous avez besoin d'une solution pour le résoudre dans une autre fonction. Lorsque vous maintenez ce contexte, qu'est-ce que dont vous avez vraiment besoin est Function.prototype.bind(), mais vous ne vous en rendez peut-être toujours pas compte.

La première fois que vous rencontrez ce problème, vous pourriez être tenté de le définir sur une variable afin de pouvoir continuer à y faire référence après avoir changé le contexte.

1. La syntaxe de bind

La fonction principale de la méthode bind() est de lier une fonction à un objet. La méthode bind() créera une fonction, et l'objet this dans le corps de la fonction La valeur sera liée à la valeur passée dans la fonction bind().

1.1 Définition

bind() est défini comme suit :

La méthode bind() crée une nouvelle fonction qui, lorsqu'elle est appelée, a son mot-clé this défini sur le mot-clé fourni value , avec une séquence donnée d'arguments précédant ceux fournis lorsque la nouvelle fonction est appelée.

la fonction bind() créera une nouvelle fonction (appelée fonction liée), la nouvelle fonction et la fonction appelée (la fonction liée fonction fonction objectif) ont le même corps de fonction. Lorsque la fonction cible est appelée, la valeur this est liée au premier paramètre de bind() et ne peut pas être remplacée.

1.2 Principe

Vous pouvez utiliser le code suivant pour simuler le principe de bind() :

Function.prototype.bind = function(context) {
 var self = this; // 保存原函数
 return function() { // 返回一个新函数
  return self.apply(context, arguments); // 执行新函数时，将传入的上下文context作为新函数的this
 }
}

1.3 Syntaxe

Function.prototype.bind(thisArg[, arg1[, arg2[, ...]]])

2 .Application du scénario de liaison

2.1 Implémentation de l'héritage d'objet

var A = function(name) {
 this.name = name;
}
 
var B = function() {
 A.bind(this, arguments);
}
 
B.prototype.getName = function() {
 return this.name;
}
 
var b = new B("hello");
console.log(b.getName()); // "hello"

2.2 Traitement des événements

var paint = {
 color: "red",
 count: 0,
 updateCount: function() {
  this.count++;
  console.log(this.count);
 }
};
 
// 事件处理函数绑定的错误方法：
document.querySelector('button')
 .addEventListener('click', paint.updateCount); // paint.updateCount函数的this指向变成了该DOM对象
 
// 事件处理函数绑定的正确方法：
document.querySelector('button')
 .addEventListener('click', paint.updateCount.bind(paint)); // paint.updateCount函数的this指向变成了paint

2.3 Fonction d'intervalle de temps

var notify = {
 text: "Hello World！",
 beforeRender: function() {
  alert(this.text);
 },
 render: function() {
 
  // 错误方法：
  setTimeout(this.beforeRender, 0); // undefined
 
  // 正确方法：
  setTimeout(this.beforeRender.bind(this), 0); // "Hello World！"
 }
};
 
notify.render();

2.4 Méthode native de Borrowing Array

var a = {};
Array.prototype.push.bind(a, "hello", "world")();
 
console.log(a); // "hello", "world"

3. Compatibilité avec le navigateur de la méthode bind()

4. Compatibilité de la méthode d'écriture de bind()

if (!Function.prototype.bind) {
 Function.prototype.bind = function() {
  var self = this, // 保存原函数
   context = [].shift.call(arguments), // 需要绑定的this上下文
   args = [].slice.call(arguments); // 剩余的参数转成数组
  return function() { // 返回一个新函数
   // 执行新函数时，将传入的上下文context作为新函数的this
   // 并且组合两次分别传入的参数，作为新函数的参数
   return self.apply(context, [].concat.call(args, [].slice.call(arguments)));
  }
 };
}

5. Différences entre les méthodes de liaison et d'appel/application

Points communs :

peuvent toutes deux changer le contexte d'exécution de la fonction. ;

Différences :

bind : n'exécute pas la fonction immédiatement, généralement utilisé dans les appels et événements asynchrones ; call/apply : exécute la fonction immédiatement.

Résumé

D'accord, c'est tout le contenu de cet article. J'espère que le contenu de cet article pourra être utile à tout le monde pour apprendre ou utiliser Javascript. un message à communiquer.

Pour une compréhension plus approfondie de la méthode Function.prototype.bind() en JS et des articles associés, veuillez prêter attention au site Web PHP chinois !