Utilisation intelligente de l'application, de l'appel et de la liaison dans JavaScript

postuler, appeler

Dans JavaScript, l'appel et l'application existent pour modifier le contexte (contexte) d'une fonction lorsqu'il s'exécute. En d'autres termes, il s'agit de changer la direction de cela à l'intérieur du corps de la fonction.

Une caractéristique majeure de JavaScript est que les fonctions ont les concepts de «contexte de définition» et de «contexte d'exécution» et que le «contexte peut être modifié».

Prenons d'abord un châtaignier:

 fonction fruits () {} fruits.prototype = {couleur: "red", disent: function () {console.log ("ma couleur est" + this.color);}} var apple = new fruits; Apple.say (); // ma couleur est rouge

Mais si nous avons un objet banane = {couleur: "jaune"}, et que nous ne voulons pas redéfinir la méthode de say, alors nous pouvons utiliser la méthode de say d'Apple par appel ou appliquer:

 banane = {couleur: "jaune"} Apple.say.call (banane); // ma couleur est yellowapple.say.apply (banane); // ma couleur est jaune

Par conséquent, on peut voir que l'appel et l'application semblent changer dynamiquement cela. Lorsqu'un objet n'a pas une certaine méthode (la banane ne dit pas la méthode dans ce châtaignier), mais d'autres sont (Apple a une méthode Say dans ce châtaignier), nous pouvons utiliser l'appel ou l'appliquer pour le faire fonctionner avec d'autres méthodes d'objet.

La différence entre appliquer et appeler

Pour l'application et l'appel, les fonctions sont exactement les mêmes, mais les méthodes d'acceptation des paramètres sont différentes. Par exemple, il existe une fonction définie comme suit:

 var func = fonction (arg1, arg2) {};

Vous pouvez l'appeler de la manière suivante:

 func.Call (this, arg1, arg2); func.Apply (this, [arg1, arg2])

Lorsque c'est le contexte que vous souhaitez spécifier, il peut s'agir de n'importe quel objet JavaScript (tout dans JavaScript est un objet), l'appel doit passer des paramètres dans l'ordre et appliquer des moyens de mettre des paramètres dans le tableau.

Dans JavaScript, le nombre de paramètres d'une fonction n'est pas fixe, donc si vous souhaitez dire les conditions applicables, utilisez l'appel lorsque vos paramètres sont clairement connus.

Lorsque vous n'êtes pas sûr, utilisez Appliquer, puis poussez le paramètre dans le tableau et passez-le.

Afin de consolider et d'approfondir la mémoire, ce qui suit est quelques utilisations courantes:

Ajouter aux tableaux

 var array1 = [12, "foo", {name "Joe"}, -2458]; var array2 = ["Doe", 555, 100]; Array.prototype.push.apply (array1, array2); / * Array1 La valeur est [12, "foo", {name "Joe"}, -2458, "Doe", 555, 100] * /

Obtenez les valeurs maximales et minimales dans le tableau

 nombres var = [5, 458, 120, -215]; var maxinnumbers = math.max.apply (mathématiques, nombres), // 458maxinnumbers = math.max.call (math, 5, 458, 120, -215); // 458

Le numéro lui-même n'a pas de méthode maximale, mais les mathématiques l'ont, nous pouvons donc utiliser sa méthode avec appel ou appliquer.

Vérifiez s'il s'agit d'un tableau (à condition que la méthode toString () n'ait pas été réécrite)

 functionIsArray (obj) {return object.prototype.tostring.call (obj) === '[Array d'objets]';}

Arris de classe (pseudo) à l'aide de la méthode du tableau

 var Domnodes = array.prototype.slice.call (document.getElementsByTagName ("*"));

Il existe une structure d'objet appelée pseudo-array dans JavaScript. Ce qui est plus spécial, c'est l'objet Arguments, et il y a aussi ceux qui appellent GetElementsByTagName, Document.ChildNodes, etc., qui renvoient les objets nodelist, tous appartiennent aux pseudo-arrayons. Vous ne pouvez pas utiliser Push, Pop et d'autres méthodes sous le tableau.

Mais nous pouvons convertir Array.prototype.slice.Call en un tableau réel avec l'objet avec l'attribut Longueur, afin que Domnodes puisse appliquer toutes les méthodes sous tableau.

Comprendre et utiliser profondément Appliquer et appeler

Empruplions une question d'entrevue pour comprendre postuler et appeler plus profondément.

Définissez une méthode de journal afin qu'il puisse proxyer la méthode Console.log. La solution commune est:

 Fonction log (msg) {console.log (msg);} log (1); // 1log (1,2); // 1

La méthode ci-dessus peut résoudre les besoins les plus élémentaires, mais lorsque le nombre de paramètres passés est incertain, la méthode ci-dessus échouera. Pour le moment, vous pouvez envisager d'utiliser une application ou un appel. Notez que le nombre de paramètres passés ici est incertain, il est donc préférable de l'utiliser. La méthode est la suivante:

 fonction log () {console.log.apply (console, arguments);}; log (1); // 1log (1,2); // 1 2

L'exigence suivante consiste à ajouter un abandon "(app)" à chaque message de journal, tel que:

 Log ("Hello World"); // (app) Bonjour Monde

Comment le faire plus élégamment? Pour le moment, vous devez penser que le paramètre des arguments est un pseudo-array, qui est converti en un tableau standard via array.prototype.slice.call, puis utilisez la méthode du tableau qui se déshabille, comme ceci:

 fonction log () {var args = array.prototype.slice.call (arguments); args.unshift ('(app)'); console.log.apply (console, args);};

lier des explications détaillées

Après avoir parlé d'appliquer et d'appeler, parlons de lier. La méthode bind () est très similaire à l'application et à l'appel, et peut également changer le pointage de cela dans le corps de la fonction.

L'explication de MDN est: la méthode Bind () créera une nouvelle fonction, appelée fonction de liaison. Lorsque cette fonction de liaison est appelée, la fonction de liaison utilisera le premier paramètre de la méthode bind () lorsqu'il est créé comme celui-ci, et le deuxième paramètre de la méthode Bind () et les paramètres suivants plus les paramètres de la fonction de liaison d'exécution lui-même comme paramètres de la fonction d'origine afin d'appeler la fonction d'origine.

Voyons comment l'utiliser. En mode monomère commun, nous utilisons généralement _Ce, cela, soi, etc. pour enregistrer cela afin que nous puissions continuer à le référencer après avoir modifié le contexte. Comme ça:

 var foo = {bar: 1, eventBind: function () {var _This = this; $ ('. Someclass'). sur ('cliquez', fonction (événement) {/ * agir sur l'événement * / console.log (_this.bar); // 1});}}

En raison du mécanisme spécifique à JavaScript, l'environnement de contexte a changé dans eventBind: function () {} à $ ('. SomeClass'). Sur ('click', fonction (événement) {}). Les méthodes ci-dessus d'utilisation des variables pour enregistrer cela sont utiles et il n'y a pas de problème. Bien sûr, l'utilisation de Bind () peut résoudre ce problème plus élégamment:

 var foo = {bar: 1, eventBind: function () {$ ('. Someclass'). sur ('cliquez'

Dans le code ci-dessus, Bind () crée une fonction. Lorsque cet événement de clic est forcément appelé, ce mot clé sera défini sur la valeur transmise (se réfère ici aux paramètres transmis lorsque Bind () est appelé). Par conséquent, nous passons ici dans le contexte souhaité (en fait foo) dans la fonction bind (). Ensuite, lorsque la fonction de rappel est exécutée, cela pointe vers l'objet FOO. Un autre châtaignier simple:

 var bar = function () {console.log (this.x);} var foo = {x: 3} bar (); // UndefinedVar func = bar.bind (foo); func (); // 3

Ici, nous créons une nouvelle fonction fonction. Lorsque vous utilisez Bind () pour créer une fonction de liaison, lorsqu'elle est exécutée, c'est celle-ci sera définie sur FOO, plutôt que la portée globale comme lorsque nous appelons BAR ().

Il y a une question intéressante. Si bind () est deux fois de suite, ou Bind () est trois fois de suite, alors quelle est la valeur de sortie? Comme ça:

 var bar = function () {console.log (this.x);} var foo = {x: 3} var sed = {x: 4} var func = bar.bind (foo) .bind (sed); func (); //? var fiv = {x: 5} var func = bar.bind (foo) .bind (sed) .bind (fiv); func (); //? var fiv = {x: 5} var func = bar.bind (foo) .bind (sed) .bind (fiv); func (); //?

La réponse est que les deux fois, la production 3 au lieu des 4 et 5 attendus en est que dans JavaScript, plusieurs fois Bind () n'est pas valide. Pour une raison plus profonde, l'implémentation de Bind () équivaut à utiliser une fonction pour envelopper un appel / appliquer en interne. Le deuxième liant () équivaut à l'enveloppe de la première liaison (), donc la liaison après la deuxième fois ne peut pas prendre effet.

Appliquer, appeler, lier la comparaison

Alors, quelles sont les différences et les différences entre l'application, l'appel et la liaison? Quand utiliser Appliquer, appeler et quand utiliser Bind. Un châtaignier simple:

 var obj = {x: 81,}; var foo = {getx: function () {return this.x;}} console.log (foo.getx.bind (obj) ()); //81Console.log(foo.getx.call(OBJ)); //81Console.log(foo.getx.apply(OBJ)); //81Console.log(foo.getx.apply(OBJ)); //81Console.log(foo.getx.apply(OBJ)); // 81

Les trois sorties sont 81, mais font attention à celle en utilisant la méthode Bind (), qui a plus de supports par la suite.

Autrement dit, la différence est que lorsque vous souhaitez modifier le contexte, et non exécuter immédiatement, mais les rappels, utilisez la méthode Bind (). Appliquer / Call exécute immédiatement la fonction.

Résumons à nouveau:

• Appliquer, appeler, lier sont tous utilisés pour modifier le pointage de cet objet de la fonction;

• Les premiers paramètres de l'application, de l'appel et de la liaison sont les objets que vous souhaitez pointer, c'est-à-dire le contexte que vous souhaitez spécifier;

• Appliquer, appeler et lier peut tous utiliser des paramètres ultérieurs pour passer les paramètres;

• Bind renvoie la fonction correspondante, qui est facile à appeler plus tard; postuler et appeler sont appelés immédiatement.

Ce qui précède est l'utilisation intelligente de l'application, de l'appel et de la liaison dans JavaScript qui vous est présentée par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!