Difficultés techniques Javascript : le lien entre les compétences apply, call et this_javascript

1.appliquer la définition

apply : appelez la fonction, remplacez la valeur this de la fonction par l'objet spécifié et remplacez les paramètres de la fonction par le tableau spécifié.

Syntaxe : apply([thisObj[,argArray]])

thisObj

Facultatif. Objet à utiliser comme objet.

argArray

Facultatif. Un ensemble d'arguments à transmettre à la fonction.

2.définition de l'appel

call : Appelez une méthode d'un objet et remplacez l'objet actuel par un autre objet.

Syntaxe : call([thisObj[, arg1[, arg2[, [, argN]]]]])

thisObj

Facultatif. Objet à utiliser comme objet actuel.

arg1, arg2, , argN

Facultatif. La liste des paramètres qui sera transmise à la méthode.

3. La différence entre les deux

Le deuxième paramètre de call peut être de n'importe quel type, tandis que le deuxième paramètre de apply doit être un tableau ou des arguments.

Les définitions sont également différentes.

4. Exemple d'analyse

(1)Exemple officiel :

function callMe(arg1, arg2){
  var s = "";
  s += "this value: " + this;
  s += "<br />";
  for (i in callMe.arguments) {
    s += "arguments: " + callMe.arguments[i];
    s += "<br />";
  }
  return s;
}
document.write("Original function: <br/>");
document.write(callMe(1, 2));
document.write("<br/>");
document.write("Function called with apply: <br/>");
document.write(callMe.apply(3, [ 4, 5 ]));
document.write(callMe.call(3, 4, 5 ));
// Output: // Original function: // this value: [object Window] // arguments: 1 // arguments: 2 // Function called with apply: // this value: 3 // arguments: 4 // arguments: 5 

Le premier utilise apply : Définition : Appelez une fonction et remplacez la valeur this de la fonction par l'objet spécifié, et utilisez l'objet spécifié 3 pour remplacer this dans la fonction callMe. ceci ici est modifié par rapport à la [Fenêtre d'objet] précédente qui devient 3. Le premier utilise call : Définition : Appeler une méthode d'un objet et remplacer l'objet actuel par un autre objet. Appelez la méthode de l'objet callMe et remplacez l'objet dans callMe par un autre objet 3. De l'analyse de ces résultats, on peut voir que les deux utilisent l'objet dans l'objet spécifié ou la valeur spécifiée pour la modifier dans l'objet. On peut aussi dire que l'objet (this) dans une fonction "détourne" l'objet (this) dans une autre fonction pour être exécuté. En fait, cela soulève une question : qu’est-ce que c’est exactement ? Pourquoi est-il si important de se donner tant de mal pour changer de direction encore et encore ? Portail : Difficultés techniques de JavaScript (Partie 3) - Explication détaillée de ceci, nouveau, postulez et appelez (le contenu ici est génial, certainement suffisant pour que vous buviez un pot) (2) Exemple :

function zqz(a,b){
  return alert(a+b);
}
function zqz_1(a,b){
  zqz.apply(zqz_1,[a,b])
}
zqz_1(1,2)  //->3 

Analyse : Selon la définition : appeler une fonction et remplacer la valeur this de la fonction par l'objet spécifié,

Ici, la fonction zqz est appelée et la valeur this de la fonction zqz est remplacée par l'objet spécifié zqz_1.

Veuillez noter que le nom de la fonction dans js est en fait un objet, car le nom de la fonction est une référence à l'objet Function !

function add(a, b)
{
 alert(a + b);
}
function sub(a, b)
{
 alert(a - b);
}
add.call(sub, 3, 1); // 4 

Analyse : Selon la définition : Appeler une méthode d'un objet et remplacer l'objet courant par un autre objet.

Voici la méthode pour appeler l'objet add et remplacer le sous-objet actuel par l'objet add ;

Autre exemple :

function zqz(a,b){
  this.name=a;
  this.age=b;
  alert(this.name+" "+this.age);
}
function zqz_1(a,b){
  zqz.apply(this,[a,b])   //我们亦可以这么写  zqz.apply(this,arguments) 
}
zqz_1("Nic",12)  //Nic 12 

Analyse : Selon la définition : appeler une fonction et remplacer la valeur this de la fonction par l'objet spécifié,

La fonction zqz est appelée ici, et le this de la fonction zqz est remplacé par l'objet spécifié this.

Autre exemple :

<input type="text" id="myText"  value="input text">
function Obj(){
  this.value="对象！";
}
var value="global 变量";
function Fun1(){
  alert(this.value);
}
Fun1();  //global 变量
Fun1.call(window); //global 变量
Fun1.call(document.getElementById('myText')); //input text
Fun1.call(new Obj());  //对象！
Fun1(); //global 变量 

分析：定义：调用一个对象的方法，用另一个对象替换当前对象。

调用Fun1对象的方法，用window对象替换当前Fun1中的对象。

调用Fun1对象的方法，用input中对象替换当前Fun1中的对象。

调用Fun1对象的方法，用新new出来的obj中的对象替换当前Fun1中的对象。

最后再总结一下：

如果在javascript语言里没有通过new（包括对象字面量定义）、call和apply改变函数的this指针，函数的this指针都是指向window的。

ps：apply的其他巧妙用法：

大家会不会觉得既然apply和call的用法差不多，那么为什么还同时存在这两种方法呢？完全可以丢掉一个呀。后来才发现一篇文章中讲到apply因为它所传参数为数组这一特点还有许多其他的妙用。

a) Math.max 可以实现得到数组中最大的一项：

因为Math.max 参数里面不支持Math.max([param1,param2]) 也就是数组，但是它支持Math.max(param1,param2,param3…)，所以可以根据apply的特点来解决 var max=Math.max.apply(null,array)，这样轻易的可以得到一个数组中最大的一项。(apply会将一个数组转换为一个参数接一个参数的传递给方法)

这块在调用的时候第一个参数给了一个null，这个是因为没有对象去调用这个方法，只需要用这个方法帮助运算，得到返回的结果就行，所以直接传递了一个null过去。

b) Math.min  可以实现得到数组中最小的一项：

同样和 max是一个思想 var min=Math.min.apply(null,array)。

c) Array.prototype.push 可以实现两个数组合并：

同样push方法没有提供push一个数组，但是它提供了push(param1,param,…paramN) 所以同样也可以通过apply来转换一下这个数组，即:

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

也可以这样理解，arr1调用了push方法，参数是通过apply将数组装换为参数列表的集合。

d) 小结：通常在什么情况下,可以使用apply类似Math.min等之类的特殊用法:

一般在目标函数只需要n个参数列表,而不接收一个数组的形式（[param1[,param2[,…[,paramN]]]]），可以通过apply的方式巧妙地解决这个问题。