Explication détaillée de l'exemple bind() dans Function

Avant-propos

bind() accepte d'innombrables paramètres. Le premier paramètre est le point this de la nouvelle fonction qu'il génère. Par exemple, si je passe une fenêtre, peu importe où elle est appelée, dans cette nouvelle. fonction cela pointe vers window, et les paramètres de cette nouvelle fonction sont le deuxième, troisième, quatrième... nième paramètre de bind() plus ses paramètres d'origine. (D'accord, je suis moi-même confus)

Exemple d'introduction

C'est plus facile à comprendre si nous regardons les châtaignes Prenons l'utilisation la plus basique de bind() :

this.x = 9; 
var module = {
 x: 81,
 getX: function() { return this.x; }
};
 
module.getX(); // 返回 81
 
var retrieveX = module.getX;
retrieveX(); // 返回 9, 在这种情况下，"this"指向全局作用域
 
// 创建一个新函数，将"this"绑定到module对象
// 新手可能会被全局的x变量和module里的属性x所迷惑
var boundGetX = retrieveX.bind(module);
boundGetX(); // 返回 81

.

Il est évident ici que lorsque nous appelons retrieveX sous l'objet window, le résultat doit être x sous la fenêtre. Nous lions l'objet module à this de retrieveX, et le problème est résolu, peu importe où il est appelé, ceci. tout pointe vers l'objet module.

Il existe d'autres paramètres de bind(). Je pense que les amis qui sont exposés à bind() pour la première fois seront confus lorsqu'ils verront la définition ci-dessus.

Donnons un exemple :

function list() {
 return Array.prototype.slice.call(arguments);
}
 
var list1 = list(1, 2, 3); // [1, 2, 3]
 
// 创建一个拥有预设初始参数的函数
var leadingThirtysevenList = list.bind(undefined,[69,37],{a:2});
 
var list2 = leadingThirtysevenList(); // [[69,37],{a:2}]
var list3 = leadingThirtysevenList(1, 2, 3); // [[69,37],{a:2}, 1, 2, 3]

La fonction list est très simple. Elle insère chaque paramètre passé dans un tableau. Nous utilisons bind() pour définir la valeur initiale de la liste. Fonction. Comme il n'est pas nécessaire de changer le pointeur de this dans la liste, undefined est passé directement à partir du deuxième paramètre, la valeur de la fonction list est transmise. Les valeurs de retour de list2 et list3 expliquent. tout va bien.

Le scénario que j'utilise habituellement bind() est de coopérer avec la fonction setTimeout, car lors de l'exécution de setTimeout, cela pointera vers l'objet window par défaut. Avant d'utiliser bind(), j'ai fait ceci :

.

function Coder(name) {
 var that = this;
 that.name = name;
 that.getName = function() {
  console.log(that.name)
 };
 that.delayGetName = function() {
  setTimeout(that.getName,1000)
 };
}
var me = new Coder('Jins')
me.delayGetName()//延迟一秒输出Jins

Définissez un pointeur qui met cela en cache au niveau supérieur de la fonction, de sorte que peu importe comment il est appelé, qui pointe vers l'instance de Coder, mais définir une variable supplémentaire est toujours inconfortable.

C'est beaucoup plus simple d'utiliser bind() :

function Coder(name) {
 this.name = name;
 this.getName = function() {
  console.log(this.name)
 };
 this.delayGetName = function() {
  setTimeout(this.getName.bind(this),1000)
 };
}
var me = new Coder('Jins')
me.delayGetName()//延迟一秒输出Jins

C'est tout, liez simplement le this de setTimeout directement au this externe.

Pour des explications plus détaillées sur les exemples bind() dans Function, veuillez faire attention au site Web PHP chinois !