javascript_javascript スキルにおける apply() メソッドと call() メソッドの違いについての深い理解

動的言語に触れたことがない人にとって、コンパイル言語の考え方で JavaScript を理解することは魔法のように奇妙に感じられるでしょう。なぜなら、意識的に不可能なことが頻繁に起こり、理不尽にさえ感じるからです。学び続ける JavaScript という自由で常に変化し続ける言語の過程でこの感覚に出会ったら、これからは「偏見」を捨てて、ここは間違いなくあなたにとって新しい大陸だから、JavaScript をゆっくりと溶かしてください。定着したプログラミング意識を確立し、新たな活力を注入してください。

さて、本題に入りましょう。まず、JavaScrtipt の動的に変化するランタイム コンテキストの特性を理解してください。この機能は主に apply メソッドと call メソッドの使用に反映されます。

apply と call の違いは、 という 1 つの文にすぎません。

foo.call(this, arg1,arg2,arg3) == foo.apply(this, argument)==this.foo(arg1, arg2, arg3)

call と apply はどちらも Function.prototype のメソッドであり、JavaScript エンジンによって内部的に実装されます。これらは Function.prototype に属しているため、各 Function オブジェクトのインスタンス、つまり各メソッドには call 属性と apply 属性があります。この 2 つのメソッドは同じ機能を持ちますが、使用方法が異なるため、混同しやすいです。

同じ点: 2 つの方法はまったく同じ効果があります

相違点: メソッドによって渡されるパラメータが異なります

それでは、メソッドの機能と、メソッドによって渡されるパラメータは何でしょうか?

上記の foo.call(this, arg1, arg2, arg3) を分析してみましょう。

foo はメソッドです。これは、メソッドが実行されるときのコンテキスト依存オブジェクトです。arg1、arg2、arg3 は、メソッドがここで実行されるときに foo メソッドに渡される、いわゆるコンテキスト依存オブジェクトです。オブジェクト指向プログラミングの基礎があれば、とてもわかりやすいです。クラスをインスタンス化した後のオブジェクト内にある

です。

JavaScript では、コードには常にコンテキスト オブジェクトがあり、コードはこのオブジェクトを処理します。コンテキスト オブジェクトは this 変数によって表され、この this 変数は常に現在のコードが配置されているオブジェクトを指します。

これが何であるかをよりよく理解するために、例を挙げてみましょう。

/创建一个A类
function A(){
//类实例化时将运行以下代码
//此时的执行上下文对象就是this,就是当前实例对象
this.message = “message of a”;
this.getMessage = function(){
<SPAN style="WHITE-SPACE: pre">	</SPAN>return this.message;
<SPAN style="WHITE-SPACE: pre">	</SPAN>}
}
//创建一个A类实例对象
var a = new A();
//调用类实例getMessage方法获得message值
alert(a.getMessage());
//创建一个B类
function B(){
this.message = ”message of b”;
this.setMessage = function(msg){
<SPAN style="WHITE-SPACE: pre">	</SPAN>this.message = msg;
<SPAN style="WHITE-SPACE: pre">	</SPAN>}
}
//创建一个B类实例对象
var a = new B();

クラス A と B はどちらもメッセージ属性 (オブジェクト指向の用語ではメンバー) を持ち、A にはメッセージを取得するための getMessage メソッドがあり、B にはメッセージを設定するための setMessage メソッドがあることがわかります。通話の様子を以下に示します。

//给对象a动态指派b的setMessage方法,注意,a本身是没有这方法的!
b.setMessage.call(a, “a的消息”);
//下面将显示”a的消息”
alert(a.getMessage());
//给对象b动态指派a的getMessage方法,注意,b本身也是没有这方法的!

これが動的言語 JavaScript 呼び出しの威力です!

オブジェクトのメソッドは任意に割り当てることができますが、オブジェクト自体にはそのようなメソッドが割り当てられていないことに注意してください。タスクを完了するためのオブジェクト。原則として、メソッドが実行されるとコンテキスト オブジェクトが変化します。

したがって、 b.setMessage.call(a, "a's message"); は、 a を実行コンテキスト オブジェクトとして使用して b オブジェクトの setMessage メソッドを呼び出すことと同等であり、このプロセスは b とは何の関係もありません。効果は a.setMessage(“a のメッセージ”);

と同等です。

apply と call は同じ効果があるため、次のように言えます

call と apply の機能は、自分のメソッドを呼び出すのと同じように、他の人のメソッドを借用して呼び出すことです。

呼び出しと適用の類似点を理解した後、それらの機能の後で、それらの違いを見てみましょう。上記の例を読んだ後は、おそらく理解していると思います。

b.setMessage.call(a, "a's message") は a.setMessage("a's message") と同等であることから、"a's message" が呼び出しのパラメータとして渡されることがわかります。

では、apply はどのように表現されるのでしょうか? 直接説明するのは明確ではありません。一目でわかるように、apply をアプリケーション シナリオと組み合わせる必要があります。

function print(a, b, c, d){
alert(a + b + c + d);
}
function example(a, b , c , d){
//用call方式借用print,参数显式打散传递
print.call(this, a, b, c, d);
//用apply方式借用print, 参数作为一个数组传递,
//这里直接用JavaScript方法内本身有的arguments数组
print.apply(this, arguments);
//或者封装成数组
print.apply(this, [a, b, c, d]);
}
//下面将显示”背光脚本”
example(”背” , “光” , “脚”, “本”);

このシナリオでは、メソッド例で a、b、c、d がメソッドによって渡されるパラメーターとして使用され、メソッドはそれぞれ apply と call を使用して、呼び出す print メソッドを借用します。

最後の文は、サンプル メソッドが直接呼び出されるため、このメソッドのコンテキスト オブジェクト this は window オブジェクトです。

したがって、call メソッドと apply メソッドの最初のパラメータ (実行中のコンテキスト オブジェクト) を除いて、call メソッドの他のパラメータはパラメータとして借用されたメソッドに順番に渡されますが、apply には 2 つのパラメータしかありません。 、2番目のパラメータは配列として渡されるため、

と言えます。

call メソッドと apply メソッドの違いは、2 番目のパラメータから開始して、呼び出しメソッドのパラメータがパラメータとして借用したメソッドに順番に渡されるのに対し、apply はこれらのパラメータを配列に直接入れて渡し、最後に借用したメソッドのパラメータリストも同様です。

アプリケーションシナリオ:

パラメータが明確な場合は、call を使用できます。パラメータが不明な場合は、apply を使用して引数を結合できます。

//例
print.call(window, “背” , “光” , “脚”, “本”);
//foo参数可能为多个
function foo(){
<SPAN style="WHITE-SPACE: pre">	</SPAN>print.apply(window, arguments);
}

上記の記事は、JavaScript の apply() メソッドと call() メソッドの違いを詳しく説明しています。これがエディターによって共有されたすべての内容であり、参考になれば幸いです。スクリプト ホームをサポートします。