ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript_javascript スキルにおける apply と call の使い方、意味、違い

JavaScript_javascript スキルにおける apply と call の使い方、意味、違い

WBOY
リリース: 2016-05-16 18:30:56
オリジナル
780 人が閲覧しました

apply と call の機能は、操作のために関数を別のオブジェクトにバインドすることです。
Function.prototype.apply(thisArg,argArray); という違いがあります。 .call(thisArg[,arg1[,arg2…]]);
関数のプロトタイプからわかるように、最初のパラメーターの名前は thisArg です。つまり、すべての関数内の this ポインターには値 thisArg が割り当てられます。これにより、関数を別のオブジェクトのメソッドとして実行するという目的が達成されます。 thisArg パラメータを除き、どちらのメソッドも Function オブジェクトに渡されるパラメータです。次のコードは、apply メソッドと call メソッドがどのように機能するかを示しています。

コードをコピーします コードは次のとおりです:
//属性 p とメソッド A を持つ関数 func1 を定義します
function func1(){
this.p="func1-";
this.A=function(arg){
alert (this.p arg);
}
}
//属性 p とメソッド B を使用して関数 func2 を定義します
function func2(){
this.p="func2- " ;
this.B=function(arg){
alert(this.p arg);
}
}
var obj1=new func1();
var obj2= new func2();
obj1.A("byA"); // func1-byA を表示
obj2.B("byB"); // func2-byB を表示
obj1.A.apply( obj2 ,["byA"]); // func2-byA を表示します。ここで、["byA"] は要素が 1 つだけある配列です。以下も同様です。
obj2.B.apply(obj1,["byB"]) ; / / func1-byB を表示
obj1.A.call(obj2,"byA") // func2-byA を表示
obj2.B.call(obj1,"byB"); byB

obj1 のメソッド A が操作のために obj2 にバインドされた後、関数 A 全体の実行環境が obj2 に転送される、つまり this ポインタが obj2 を指していることがわかります。同様に、obj2 の関数 B を obj1 オブジェクトにバインドして実行することもできます。コードの最後の 4 行は、apply 関数と call 関数のパラメーター形式の違いを示しています。

引数の長さ属性とは異なり、関数オブジェクトには長さ属性もあります。これは、呼び出し時に実際に渡されるパラメーターの数ではなく、関数の定義時に指定されたパラメーターの数を表します。たとえば、次のコードでは 2 が表示されます:

コード をコピーします。 コードは次のとおりです:
function sum(a ,b){ return a b;}



JS マニュアルの呼び出しの説明を見てみましょう:

call method オブジェクトのメソッドを呼び出して、現在のオブジェクトを別のオブジェクトに置き換えます。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
パラメータ
thisObj
オプション。現在のオブジェクトとして使用されるオブジェクト。
arg1、arg2、、、argN
オプション。一連のメソッドパラメータが渡されます。
説明
call メソッドを使用すると、別のオブジェクトの代わりにメソッドを呼び出すことができます。 call メソッドは、関数のオブジェクト コンテキストを初期コンテキストから thisObj で指定された新しいオブジェクトに変更します。
thisObj パラメーターが指定されていない場合は、グローバル オブジェクトが thisObj として使用されます。

わかりやすく説明すると、実際にはオブジェクトの内部ポインタを変更すること、つまりオブジェクトの this が指す内容を変更することになります。これは、オブジェクト指向の js プログラミングで役立つ場合があります。

インターネット上のコードスニペットを引用すると、実行してみると自然に理由がわかります。



[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります ]

call 関数と apply メソッド 最初のパラメータは、現在のオブジェクトに渡されるオブジェクトであり、これは関数内にあります。次のパラメータは、現在のオブジェクトに渡されるパラメータです。
次のコードを実行します:

[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、
を実行するために更新する必要があります]<script> function Obj(){this.value="对象!";} var value="global 变量"; function Fun1(){alert(this.value);} window.Fun1(); //global 变量 Fun1.call(window); //global 变量 Fun1.call(document.getElementById('myText')); //input text Fun1.call(new Obj()); //对象! </script>
それぞれ func と var がポップアップしているのがわかります。この時点で、call の各パラメータの意味は理解できました。

apply と call は同じ機能ですが、パラメーターに違いがあります。
最初のパラメータは同じ意味ですが、2 番目のパラメータについては、
apply はパラメータ配列に渡されます。つまり、複数のパラメータが 1 つの配列に結合されて渡され、call は call として使用されます。渡されます (2 番目のパラメーターから始まります)。
たとえば、func.call(func1,var1,var2,var3) に対応する apply の書き込みメソッドは次のとおりです。 func.apply(func1,[var1,var2,var3])

を使用する利点apply は同時に、現在の関数の引数オブ​​ジェクトを apply の 2 番目のパラメータとして直接渡すことができます。

javascript apply 使用法 補足
funObj.apply([thisObj[ ,argArray]])
application 現在のオブジェクトを別のオブジェクトに置き換えるオブジェクトのメソッド。
functionObj のメソッドが実行されると、関数内の this オブジェクトが thisObj に置き換えられます。
thisObj オプション。現在のオブジェクトとして使用されるオブジェクト。
argArray オプション。この関数に渡される引数の配列。
コードをコピー コードは次のとおりです:

//オブジェクトの継承に適用します。プロトタイプを使用し、親オブジェクトのプロパティを子オブジェクトに暗黙的に割り当てます。
function par(name)
{
this.parname=name;
}
function child(chname,parname){
this.chname=chname;
par.apply(this,new Array(parname));
var o=new child("ジョン","ミスター ジョン"); >alert(o.parname ";" o.chname);
//apply は一般的なメソッド呼び出しで使用できます
window.onunload=function()
{
alert(" アンロード イベントは発射されました!");
}
function SayBye(name,toName)
{
alert(name " は bye to " toName);
}
function SayEndBiz( name,toName ,content)
{
alert(name " は " toName" との " content " についての話を終了します);
function addTo(args,func)
{
var oldHandler= window.onunload||function(){};
window.onunload=function()
{
func.apply(window,args); 🎜>}
}
addTo(new Array("John","everyone"),sayBye);
addTo(new Array("John","everyone","会社の開発戦略") ),sayEndBiz)

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート