Une brève analyse de l'utilisation et de la mise en œuvre de la méthode bind () en JavaScript

Avant de discuter de la méthode Bind (), jetons un coup d'œil à une question:

var altwrite = document.write;

AltWrite ("Hello");

// 1. Quel est le problème avec le code ci-dessus?

// 2. Quelle est la bonne opération comme

// 3. Comment implémenter la méthode bind ()

Pour la question ci-dessus, la réponse n'est pas trop difficile. Le principal point de test est le problème indiqué par cela. La fonction altwrite () modifie ce pointant vers des objets globaux ou des fenêtres, provoquant un appel anormal pendant l'exécution. La solution correcte consiste à utiliser la méthode bind ():

altwrite.bind (document) ("bonjour")

Bien sûr, vous pouvez également utiliser la méthode Call ():

Altwrite.Call (document, "Bonjour")

L'objectif de cet article est de discuter de la mise en œuvre de la méthode bind () dans le troisième numéro. Avant de commencer à discuter de la mise en œuvre de bind (), jetons un coup d'œil à l'utilisation de la méthode bind ():

Fonction de liaison

La façon la plus simple d'utiliser Bind () est de créer une fonction afin que la fonction ait la même valeur, quelle que soit la façon dont elle est appelée. Les erreurs courantes sont comme l'exemple ci-dessus, en retirant la méthode de l'objet, puis en l'appelant, et en voulant que cela pointe vers l'objet d'origine. Si aucun traitement spécial n'est effectué, l'objet d'origine sera généralement perdu. L'utilisation de la méthode bind () peut résoudre ce problème magnifiquement:

 this.num = 9; var mymodule = {num: 81, getnum: function () {return this.num; }}; module.getNum (); // 81var getnum = module.getNum; getnum (); // 9, car dans cet exemple, "ce" pointe vers l'objet global // Créer une fonction liée au module var boundgetnum = getnum.bind (module); BoundgetNum (); // 81

Fonctions partielles

Les fonctions partielles sont également appelées applications partielles. Voici une section de définitions sur les fonctions partielles:

L'application partielle peut être décrite comme une fonction qui accepte un certain nombre d'arguments, les valeurs de liaison à un ou plusieurs de ces arguments et le renvoi d'une nouvelle fonction qui n'accepte que les arguments restants et non liés.

C'est une bonne fonctionnalité. En utilisant Bind (), nous définissons les paramètres prédéfinis de la fonction, puis passons dans d'autres paramètres lorsque vous appelez:

 fonction list () {return array.prototype.slice.call (arguments);} var list1 = list (1, 2, 3); // [1, 2, 3] // Paramètre prédéfini 37var LeadingThirtySevenList = list.bind (Undefined, 37); var list2 = LeadingThirTySevenList (); // [37] var list3 = LeadingThirTySevenlist (1, 2, 3); // [37, 1, 2, 3]

Utiliser avec Settimeout

Généralement, ce setTimeout () pointe vers une fenêtre ou un objet global. Lorsque vous utilisez une méthode de classe, cela doit pointer vers l'instance de classe, vous pouvez utiliser Bind () pour le lier à la fonction de rappel pour gérer l'instance.

 Function Bloomer () {this.PetalCount = Math.Ceil (Math.Random () * 12) + 1;} // Appelez la fonction Declare Fonction Bloomer.prototype.bloom = function () {Window.SetTimeout (this.declare.bind (this), 1000);}; '' ''pototype.declare = function () {console.log (' a. + 'Petal!');};

Remarque: La méthode ci-dessus peut également être utilisée pour les fonctions de gestion des événements et les méthodes de setterval.

Bind Fonction comme constructeur

Les fonctions de liaison conviennent également à l'utilisation du nouvel opérateur pour construire des instances de la fonction objectif. Lorsque vous utilisez des fonctions de liaison pour construire une instance, Remarque: Ceci sera ignoré, mais les paramètres passés sont toujours disponibles.

 Point de fonction (x, y) {this.x = x; this.y = y;} point.prototype.toString = function () {return this.x + ',' + this.y; }; var p = nouveau point (1, 2); p.toString (); // '1,2'var videoBj = {}; var yaxispoint = point.bind (videoBj, 0 / * x * /); // Les exemples dans l'implémentation ne sont pas pris en charge, // support de liaison natif: var yaxispoint = point.bind (null, 0 / * x * /); var axispoint = new yaxispoint (5); axispoint.toString (); // '0,5'axispoint instanceOf Point; // true axispoint instanceof yaxispoint; // True nouveau point (17, 42) instance de yaxispoint; // vrai

Dans l'exemple ci-dessus, Point et YaxisPoint partagent des prototypes, il est donc vrai lorsqu'il est jugé à l'aide de l'opérateur d'instance.

raccourci

bind () peut également créer des raccourcis pour les fonctions qui nécessitent une valeur spécifique de cela.

Par exemple, pour convertir un objet de tableau d'une classe en un tableau réel, les exemples possibles sont les suivants:

 var slice = array.prototype.slice; // ... Slice.Call (arguments);

Si vous utilisez bind (), la situation devient plus facile:

 var unboundslice = array.prototype.slice; var slice = function.prototype.call.bind (unboundslice); // ... Slice (arguments);

accomplir

Dans les sections ci-dessus, vous pouvez voir que Bind () a de nombreux scénarios d'utilisation, mais la fonction bind () a été ajoutée dans la cinquième version d'ECMA-262; Il peut ne pas fonctionner sur tous les navigateurs. Cela nous oblige à implémenter nous-mêmes la fonction bind ().

Tout d'abord, nous pouvons simplement implémenter la méthode bind () en spécifiant la portée à la fonction objectif:

 Function.prototype.bind = function (context) {self = this; // Enregistrez ceci, c'est-à-dire la fonction objectif qui appelle la méthode Bind renvoie la fonction () {return self.Apply (contexte, arguments); };};

Compte tenu du curry de la fonction, nous pouvons construire une liaison plus robuste ():

 Function.prototype.bind = function (context) {var args = array.prototype.slice.call (arguments, 1), self = this; return function () {var innerargs = array.prototype.slice.call (arguments); var finalArgs = args.concat (innerargs); return self.apply (contexte, finalArgs); };};

Cette fois, la méthode bind () peut lier des objets et prend également en charge les paramètres de passage pendant la liaison.

Continuez, les fonctions JavaScript peuvent également être utilisées comme constructeurs. Lorsque les fonctions liées sont appelées de cette manière, la situation est plus subtile et elle doit être impliquée dans le passage de la chaîne prototype:

 Function.prototype.bind = function (context) {var args = array.prototype.slice (arguments, 1), f = function () {}, self = this, bound = function () {var innerargs = array.prototype.slice.call (arguments); var finalArgs = args.concat (innerargs); return self.Apply ((cette instance de f? Ceci: contexte), finalArgs); }; F.prototype = self.prototype; bend.prototype = new f (); retour lié;};

Il s'agit de l'implémentation de bind () dans le livre "Application Web JavaScript": En définissant un constructeur de relais F, la fonction liée se trouve sur la même chaîne prototype que la fonction appelant bind (). Utilisez le nouvel opérateur pour appeler la fonction liée et l'objet renvoyé peut également utiliser l'instance normalement. Par conséquent, il s'agit de l'implémentation la plus rigoureuse de Bind ().

Afin de prendre en charge la fonction bind () dans le navigateur, il vous suffit de modifier légèrement la fonction ci-dessus:

 Function.prototype.bind = function (othis) {if (typeof this! == "function") {throw new typeError ("function.prototype.bind - ce qui essaie d'être lié n'est pas appelable"); } var aargs = array.prototype.slice.call (arguments, 1), ftobind = this, fnop = function () {}, fbound = function () {return ftobind.apply (this instance fnop && othis? this: othis || window, aargs.concat (array.pototype.slice.call (aruments)); }; fnop.prototype = this.prototype; fbound.prototype = new fnop (); retour fbound; };

La brève analyse ci-dessus de l'utilisation et de la mise en œuvre de la méthode bind () en JavaScript est tout le contenu que je partage avec vous. J'espère que cela pourra vous donner une référence et j'espère que vous pourrez soutenir Wulin.com plus.