JavaScript_javascript スキルにおける apply、call、this の使用の簡単な比較分析

1.定義を適用

apply: 関数を呼び出し、関数の this 値を指定されたオブジェクトに置き換え、関数のパラメーターを指定された配列に置き換えます。
構文: apply([thisObj[,argArray]])
このオブジェクト
オプション。このオブジェクトとして使用するオブジェクト。

argArray
オプション。関数に渡される引数のセット。

2.呼び出し定義

call: オブジェクトのメソッドを呼び出し、現在のオブジェクトを別のオブジェクトに置き換えます。
構文: call([thisObj[, arg1[, arg2[, [, argN]]]]])
このオブジェクト
オプション。現在のオブジェクトとして使用されるオブジェクト。

引数1、引数2、、、引数N
オプション。メソッドに渡されるパラメータのリスト。

3. 2 つの違い

call の 2 番目のパラメータは任意の型にすることができますが、apply の 2 番目のパラメータは配列または引数である必要があります。
定義にも違いがあります。

4. 分析例

(1) 公式例:

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

apply を使用した最初のもの: 定義: 関数を呼び出し、関数の this 値を指定されたオブジェクトに置き換えます
callMe 関数を呼び出し、callMe 関数内の this を指定されたオブジェクト 3 に置き換えます。このとき、ここでは前の [オブジェクト ウィンドウ] から 3 に変更されます。
最初の方法では call を使用します。 定義: オブジェクトのメソッドを呼び出し、現在のオブジェクトを別のオブジェクトに置き換えます。
オブジェクト callMe のメソッドを呼び出し、callMe 内のオブジェクトを別のオブジェクトに置き換えます。 3.
これらの結果を分析すると、どちらも指定されたオブジェクト内のオブジェクトまたは指定された値を使用して、オブジェクト内のこれを変更していることがわかります。
関数内のオブジェクト (this) が、実行される別の関数内のオブジェクト (this) を「ハイジャック」するとも言えます。
実際、これは「これは一体何なのか?」という疑問を引き起こします。何度も何度も方向を変えるという大変な苦労がなぜそれほど重要なのでしょうか？

(2) 例:

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

分析: 定義によると、関数を呼び出し、関数の this 値を指定されたオブジェクト
に置き換えます。 ここで関数 zqz が呼び出され、zqz 関数の this 値が指定されたオブジェクト zqz_1 に置き換えられます。

関数名は Function オブジェクトへの参照であるため、js 内の関数名は実際にはオブジェクトであることに注意してください。

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

分析: 定義によると: オブジェクトのメソッドを呼び出し、現在のオブジェクトを別のオブジェクトに置き換えます。
これは、オブジェクト add を呼び出し、現在のオブジェクト sub を add オブジェクトに置き換えるメソッドです。

別の例:

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

分析: 定義によると、関数を呼び出し、関数の this 値を指定されたオブジェクト
に置き換えます。 ここでは、関数 zqz が呼び出され、指定されたオブジェクト this を使用して関数 zqz の this が置き換えられます。

別の例:

<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 オブジェクトのメソッドを呼び出して、Fun1 の現在のオブジェクトを window オブジェクトに置き換えます。
Fun1 オブジェクトのメソッドを呼び出し、Fun1 の現在のオブジェクトを入力のオブジェクトに置き換えます。
Fun1 オブジェクトのメソッドを呼び出し、現在の Fun1 のオブジェクトを新しい obj のオブジェクトに置き換えます。

ネチズンによって提起された質問を見てみましょう:

call メソッドを使用すると、別のオブジェクトに代わってメソッドを呼び出すことができます。 call メソッドは、関数のオブジェクト コンテキストを初期コンテキストから thisObj で指定された新しいオブジェクトに変更します。 thisObj パラメータが指定されていない場合は、グローバル オブジェクトが thisObj として使用されます。

それでは、思い切ってケースを書いてみましたが、想像していたものとは異なりました。コードは次のとおりです。

 function parent()
 {
 alert(this.name);
 }
 function child()
 {
 var name = '张三';
 };
 
 parent.call(child); 

彼が出力するのは子です。なぜ Zhang San ではないのでしょうか? 上記の文によると、親コンテキストが子になっています。

そして、child には name 値があり、出力は Zhang San である必要があります。
を説明してください。

 
 function parent()
 {
 alert(this.name);
 }
 function child()
 {
 this.name = '张三';
 };
 var p1 = new child();
 
 parent.call(p1); 

これにより、Zhang San Why? が出力されます。

何が起こっているのか見てみましょう

call と apply の使い方は、変数を関数名として使用して呼び出すことができることです。たとえば、関数のコールバック関数です。具体的な使用法は次のとおりです。executed function.call(a,b,c...)。ここで、a は実行される関数で指定する必要があるオブジェクトであり、null にすることができます。また、他のパラメータは、その関数のパラメータとして使用されます。実行された関数。 apply の使用法は、2 番目のパラメーターが配列である点を除いて同様です。

例:

function doPost(url,param,callback){
  //这里处理post请求
  var str = xhr.responseText;
  callback.apply(this,[str]);//相当于调用了callback(str);并把callback中的this设定为doPost对象
}