Technische Schwierigkeiten mit Javascript: der Zusammenhang zwischen Apply-, Call- und this_javascript-Kenntnissen

1.Definition anwenden

Anwenden: Rufen Sie die Funktion auf, ersetzen Sie diesen Wert der Funktion durch das angegebene Objekt und ersetzen Sie die Parameter der Funktion durch das angegebene Array.

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

thisObj

Optional. Das als dieses Objekt zu verwendende Objekt.

argArray

Optional. Eine Reihe von Argumenten, die an die Funktion übergeben werden sollen.

2.Anrufdefinition

Aufruf: Rufen Sie eine Methode eines Objekts auf und ersetzen Sie das aktuelle Objekt durch ein anderes Objekt.

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

thisObj

Optional. Das Objekt, das als aktuelles Objekt verwendet werden soll.

arg1, arg2, , argN

Optional. Die Parameterliste, die an die Methode übergeben wird.

3. Der Unterschied zwischen den beiden

Der zweite Parameter von call kann von einem beliebigen Typ sein, während der zweite Parameter von apply ein Array oder Argumente sein muss.

Auch die Definitionen sind unterschiedlich.

4. Beispielanalyse

(1)Offizielles Beispiel:

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 

Die erste Anwendung gilt: Definition: Rufen Sie eine Funktion auf und ersetzen Sie den Wert dieser Funktion durch das angegebene Objekt. Rufen Sie die Funktion callMe auf und verwenden Sie das angegebene Objekt 3, um dies in der Funktion callMe zu ersetzen. Dies wurde hier gegenüber dem vorherigen geändert. [Objektfenster] wird zu 3. Die erste verwendet call: Definition: Rufen Sie eine Methode eines Objekts auf und ersetzen Sie das aktuelle Objekt durch ein anderes Objekt. Rufen Sie die Methode des Objekts callMe auf und ersetzen Sie das Objekt in callMe durch ein anderes Objekt 3. Aus der Analyse dieser Ergebnisse ist ersichtlich, dass beide das Objekt im angegebenen Objekt oder den angegebenen Wert verwenden, um dies im Objekt zu ändern. Man kann auch sagen, dass das Objekt (this) in einer Funktion das Objekt (this) in einer anderen auszuführenden Funktion „kapert“. Tatsächlich wirft dies die Frage auf: Was genau ist das? Warum ist es so wichtig, immer wieder so viel Mühe auf sich zu nehmen, um die Richtung zu ändern? Portal: Technische Schwierigkeiten von JavaScript (Teil 3) – Ausführliche Erklärung dazu, neu, anwenden und aufrufen (der Inhalt hier ist großartig, definitiv genug, um einen Topf zu trinken) (2) Beispiel:

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: Gemäß der Definition: Rufen Sie eine Funktion auf und ersetzen Sie den Wert dieser Funktion durch das angegebene Objekt,

Hier wird die Funktion zqz aufgerufen und dieser Wert der zqz-Funktion durch das angegebene Objekt zqz_1 ersetzt.

Bitte beachten Sie, dass der Funktionsname in js tatsächlich ein Objekt ist, da der Funktionsname eine Referenz auf das Funktionsobjekt ist!

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

Analyse: Laut Definition: Rufen Sie eine Methode eines Objekts auf und ersetzen Sie das aktuelle Objekt durch ein anderes Objekt.

Hier ist die Methode zum Aufrufen des Objekts „add“ und zum Ersetzen des aktuellen Objekts „sub“ durch das Objekt „add“;

Ein weiteres Beispiel:

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: Gemäß der Definition: Rufen Sie eine Funktion auf und ersetzen Sie den Wert dieser Funktion durch das angegebene Objekt,

Hier wird die Funktion zqz aufgerufen und das This der Funktion zqz durch das angegebene Objekt this ersetzt.

Ein weiteres Beispiel:

<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的方式巧妙地解决这个问题。