Utilisation de apply et call en js

Cet article présente principalement l'utilisation de apply et call en js. Il a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent se référer à

La définition du prototype de Function dans ECAMScript3. Il existe deux méthodes, à savoir Function.prototype.call et Function.prototype.apply. Cet article présente l'utilisation de apply et call en détail. Vous pouvez vous y référer si nécessaire.

Préface

appeler et appliquer existent tous deux pour changer le contexte qui est le contexte lorsqu'une fonction est en cours d'exécution. , autrement dit, pour changer le pointeur de this à l'intérieur du corps de la fonction .
call et apply ont exactement la même fonction, mais ils acceptent les paramètres de différentes manières.

Définition de la méthode
apply
Function.apply(obj,args)La méthode peut recevoir deux paramètres :

obj : Cet objet remplacera cet objet dans la classe Function

args : Il s'agit d'un tableau ou de type tableau, et la méthode apply transmet les éléments de cette collection comme paramètres de la fonction objet appelée.

call

Le premier paramètre de la méthode call est le même que le premier paramètre de la apply méthode , sauf que le deuxième paramètre est une liste de paramètres

En mode non strict, lorsque le premier paramètre est passé comme nul ou indéfini, celui-ci dans le corps de la fonction pointera vers l'objet hôte par défaut, dans le navigateur C'est la fenêtre

var test = function(){
  console.log(this===window);
}
test.apply(null);//true
test.call(undefined);//true

Utilisation

"pirater" autre méthode populaire

À ce stade, la méthode logName dans foo sera référencée par bar, et this points à barre

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

Mettre en œuvre l'héritage

function Animal(name){   
  this.name = name;   
  this.showName = function(){   
    console.log(this.name);   
  }   
}   

function Cat(name){  
  Animal.call(this, name);  
}   

var cat = new Cat("Black Cat");   
cat.showName(); //Black Cat

Dans le développement réel, nous rencontrons souvent des scénarios dans lesquels ce pointeur est modifié par inadvertance.
a une méthode fun locale Lorsque fun est appelé comme une fonction normale, le this interne de fun pointe vers <.>window, mais on souhaite souvent qu'il pointe vers le nœud #test, voir le code suivant :

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

En utilisant

call,apply 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 aussi le faire, mais en In le mode

strict de ECMAScript 5, celui-ci dans ce cas a été stipulé non pas pour pointer vers l'objet global, mais pour être non 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
}

function func(){
  "use strict"
  alert ( this );  // 输出：undefined
}
func();

Autres utilisations

Semblable à un tableau

Ici, les objets qui remplissent les conditions suivantes sont appelés semblables à un tableau

1 Avoir l'attribut de longueur

. 2. Par index Façons de stocker les données

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

Les tableaux de classes courants incluent

arguments, NodeList !

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

De cette façon, insérez un 4 dans la page

arguments

peut réaliser la fusion de deux tableauxArray.prototype.push

De même, la méthode push ne fournit pas de push vers un tableau, mais elle fournit

push(param1, param,...paramN), vous pouvez donc remplacez également ce tableau via apply, c'est-à-dire :

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

peut également être compris de cette façon,

arr1 appelle le push et les paramètres sont transmis via applyConvertissez le tableau en un ensemble de listes de paramètres.

Pour un autre exemple, je veux trouver la valeur maximale dans un tableau en forme de tableau

(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)) //[object Number]
console.log(Object.prototype.toString.call('123')) //[object String]
console.log(Object.prototype.toString.call(undefined)) //[object Undefined]
console.log(Object.prototype.toString.call(true)) //[object Boolean]
console.log(Object.prototype.toString.call({})) //[object Object]
console.log(Object.prototype.toString.call([])) //[object Array]
console.log(Object.prototype.toString.call(function(){})) //[object Function]

Recommandations associées :

Utilisation de l'url, href, src dans JS

Exemple d'analyse de ceci en JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!