Explication détaillée de l'utilisation de l'application et de l'appel dans JS

Préface

Appelez et appliquez les deux pour changer le contexte , c'est-à-dire le contexte, lorsqu'une fonction est exécutée. En d'autres termes, il s'agit de changer la direction de cela à l'intérieur du corps de la fonction .

La fonction de l'appel et de l'application est exactement la même, mais la façon d'accepter les paramètres est différente.

Définition de la méthode

appliquer

Function.apply(obj,args) peut recevoir deux paramètres:

OBJ: Cet objet remplacera cet objet dans la classe de fonction

Args: Il s'agit d'un tableau ou d'un tableau de classe. La méthode d'application transmet les éléments de cette collection en tant que paramètres à la fonction appelée.

appel

Le premier paramètre de la méthode d'appel est le même que la méthode d'application , sauf que le deuxième paramètre est une liste de paramètres

En mode non stricte, lorsque notre premier paramètre est passé comme nul ou non défini, cela dans le corps de fonction pointera vers l'objet hôte par défaut, et dans le navigateur, c'est la fenêtre

 var test = function () {console.log (this === fenêtre);} test.apply (null); // truetest.call (undefined); // true

usage

Comment "détourner" les autres

À l' heure​

 var foo = {name: "Mingming", logname: function () {console.log (this.name); }} var bar = {name: "xiaowang"}; foo.logname.call (bar); // xiaowang

Réaliser l'héritage

 fonction animal (name) {this.name = name; this.showname = function () {console.log (this.name); }} fonction cat (name) {animal.call (this, name); } var chat = new Cat ("Black Cat"); cat.showname (); // chat noir

Dans le développement réel, cela change souvent de scénarios changeants par inadvertance.

Il existe une méthode de plaisir locale. Lorsque le plaisir est appelé comme une fonction normale, cela intérieur Fun pointe vers la fenêtre , mais nous voulons souvent qu'il pointe vers le nœud #Test , voyez le code suivant:

 window.id = "Window"; document.QuerySelector ('# test'). onClick = function () {console.log (this.id); // test var fun = function () {console.log (this.id); } fun (); // fenêtre}

En utilisant l'appel, appliquer, nous pouvons facilement résoudre ce problème

 window.id = "Window"; document.QuerySelector ('# test'). onClick = function () {console.log (this.id); // test var fun = function () {console.log (this.id); } fun.call (this); // test}

Bien sûr, vous pouvez le faire, mais en mode strict ECMAScript 5 , cela dans ce cas a été spécifié qu'il ne pointera pas vers l'objet global, mais n'est pas défini:

 window.id = "window"; document.QuerySelector ('# test'). onClick = function () {var that = this; console.log (this.id); // test var fun = function () {console.log (that.id); } fun (); // test}

 fonction func () {"utiliser strict" alert (this); // Sortie: Undefined} func ();

Autres usages

Tableau de classe

Ici, les objets qui remplissent les conditions suivantes sont appelés tableaux de classe

1. Avoir un attribut de longueur

2. Stockez les données en fonction de l'index

3. Push, pop et autres méthodes qui n'ont pas de tableaux

Les tableaux communs de classes comprennent des arguments et des nodelist!

 (function () {array.prototype.push.call (arguments, 4); console.log (arguments); // [1, 2, 3, 4]}) (1,2,3)

De cette façon, poussez un 4 dans les arguments

Array.prototype.push peut implémenter la combinaison de deux tableaux

La méthode push ne fournit pas de push un tableau, mais elle fournit PUSH (param1, param,… paramn) afin que vous puissiez également installer et remplacer le tableau en appliquant, c'est-à-dire:

 var arr1 = nouveau tableau ("1", "2", "3"); var arr2 = nouveau tableau ("4", "5", "6"); Array.prototype.push.apply (Arr1, Arr2); console.log (arr1); // ["1", "2", "3", "4", "5", "6"]

Il peut également être compris de cette manière, ARR1 appelle la méthode push et les paramètres sont remplacés par l'application de l'assemblage du tableau dans un ensemble de listes de paramètres.

Par exemple, je souhaite trouver la valeur maximale dans le tableau des classes

 (function () {var maxnum = math.max.apply (null, arguments); console.log (maxnum); // 56}) (34,2,56);

Type de juge

 console.log (object.prototype.tostring.call (123)) // [numéro d'objet] console.log (object.prototype.tostring.call ('123')) // [objet String] console.log (objet.prototype.tostring.call (undefined)) // [objet Undefined] console.log (object.prototype.tostring.call (true)) // [objet boolean] console.log (objet.prototype.tostring.call ({})) // [objet objet] console.log (objet.prototype.tostring.call ([]) // [objet Array] console.log (object.prototype.toString.call (function () {})) // [Fonction objet]

Ce qui précède est le contenu complet du résumé de l'utilisation de l'application et de l'appel. Tout le monde est invité à laisser un message pour participer à la discussion. J'espère également que cet article sera utile à tout le monde dans l'apprentissage de JavaScript.