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); // trueusage
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); // xiaowangRé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 noirDans 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.