ホームページ >ウェブフロントエンド >jsチュートリアル >js apply/call/caller/callee/bindの使い方と違い分析_javascriptスキル
js apply/call/caller/callee/bindの使い方と違い分析_javascriptスキル
- WBOYオリジナル
- 2016-05-16 18:43:121155ブラウズ
1. メソッド
を呼び出して、現在のオブジェクトを別のオブジェクトに置き換えます (実際には、オブジェクトの内部ポインターを変更します。つまり、オブジェクトの this が指す内容を変更します)。 ）。
Js コード
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
パラメータ
thisObj
オプション。現在のオブジェクトとして使用されるオブジェクト。
arg1、arg2、、、argN
オプション。一連のメソッドパラメータが渡されます。
説明
call メソッドを使用すると、別のオブジェクトの代わりにメソッドを呼び出すことができます。 call メソッドは、関数のオブジェクト コンテキストを初期コンテキストから thisObj で指定された新しいオブジェクトに変更します。 thisObj パラメータが指定されていない場合は、グローバル オブジェクトが thisObj として使用されます。
Js コード
<入力タイプ="text " id="myText" value="入力テキスト"> コード
function Obj(){this.value="Object! ";}
var value="グローバル変数"; function Fun1( ){alert(this.value);}
window.Fun1(); //グローバル変数
Fun1.call(window); //グローバル変数
Fun1.call(document.getElementById) ('myText ')); //テキストを入力
Fun1.call(new Obj());
Js コード
コード
apply と call は同じ機能ですが、パラメーターに違いがあります。最初のパラメータの意味は同じですが、2 番目のパラメータの場合: apply はパラメータ配列で渡します。つまり、複数のパラメータが 1 つの配列に結合されて渡されますが、call は call のパラメータとして渡されます ( 2 つのパラメータから開始します)。 たとえば、func.call(func1,var1,var2,var3) に対応する apply の記述メソッドは次のとおりです: func.apply(func1,[var1,var2,var3]) を同時に使用する利点。 apply の 2 番目のパラメータとして渡される現在の関数の引数オブジェクトを直接追加できることです。 Js コード
コードをコピー
注: 関数の場合、caller 属性は関数の実行時にのみ定義されます。 関数が JScript プログラムのトップレベルから呼び出された場合、 caller には null が含まれます。 caller 属性が文字列コンテキストで使用される場合、結果は functionName.toString と同じになります。つまり、関数の逆コンパイルされたテキストが表示されます。
Js コード
コードをコピー
を呼び出して、現在のオブジェクトを別のオブジェクトに置き換えます (実際には、オブジェクトの内部ポインターを変更します。つまり、オブジェクトの this が指す内容を変更します)。 ）。
Js コード
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
パラメータ
thisObj
オプション。現在のオブジェクトとして使用されるオブジェクト。
arg1、arg2、、、argN
オプション。一連のメソッドパラメータが渡されます。
説明
call メソッドを使用すると、別のオブジェクトの代わりにメソッドを呼び出すことができます。 call メソッドは、関数のオブジェクト コンテキストを初期コンテキストから thisObj で指定された新しいオブジェクトに変更します。 thisObj パラメータが指定されていない場合は、グローバル オブジェクトが thisObj として使用されます。
Js コード
コードをコピー コードは次のとおりです:
<入力タイプ="text " id="myText" value="入力テキスト"> コード
function Obj(){this.value="Object! ";}
var value="グローバル変数"; function Fun1( ){alert(this.value);}
window.Fun1(); //グローバル変数
Fun1.call(window); //グローバル変数
Fun1.call(document.getElementById) ('myText ')); //テキストを入力
Fun1.call(new Obj());
コード
コードをコピー コードは次のとおりです。
var first_object = {
num: 42
};
var Second_object = {
num: 24
}; >return this .num * mult;
multiply.call(first_object, 5); // 42 * 5 を返します
multiply.call(first_object, 5) // 24 * 5 を返します
2. apply メソッド
apply メソッドの最初のパラメータは、現在のオブジェクト、つまり関数内の this に渡されるオブジェクトでもあります。次のパラメータは、現在のオブジェクトに渡されるパラメータです。 num: 42
};
var Second_object = {
num: 24
}; >return this .num * mult;
multiply.call(first_object, 5); // 42 * 5 を返します
multiply.call(first_object, 5) // 24 * 5 を返します
2. apply メソッド
apply と call は同じ機能ですが、パラメーターに違いがあります。最初のパラメータの意味は同じですが、2 番目のパラメータの場合: apply はパラメータ配列で渡します。つまり、複数のパラメータが 1 つの配列に結合されて渡されますが、call は call のパラメータとして渡されます ( 2 つのパラメータから開始します)。 たとえば、func.call(func1,var1,var2,var3) に対応する apply の記述メソッドは次のとおりです: func.apply(func1,[var1,var2,var3]) を同時に使用する利点。 apply の 2 番目のパラメータとして渡される現在の関数の引数オブジェクトを直接追加できることです。 Js コード
コードをコピー
コードは次のとおりです: var func=new function() {this.a="func"} var myfunc=function(x,y){
var a="myfunc" alert(this.a); x y);
}
myfunc.call(func,"var"," fun");// "func" "var fun"
myfunc.apply(func,["var"," fun) "]) ;// "func" "var fun"
3. 呼び出し元属性
は、呼び出し元の関数本体である関数への参照を返します。現在の機能。
functionName.caller: functionName オブジェクトは、実行される関数の名前です。 }
myfunc.call(func,"var"," fun");// "func" "var fun"
myfunc.apply(func,["var"," fun) "]) ;// "func" "var fun"
3. 呼び出し元属性
は、呼び出し元の関数本体である関数への参照を返します。現在の機能。
注: 関数の場合、caller 属性は関数の実行時にのみ定義されます。 関数が JScript プログラムのトップレベルから呼び出された場合、 caller には null が含まれます。 caller 属性が文字列コンテキストで使用される場合、結果は functionName.toString と同じになります。つまり、関数の逆コンパイルされたテキストが表示されます。
Js コード
コードをコピー
コードは次のとおりです。 function CallLevel() { if (CallLevel.caller == null) alert("CallLevel がトップレベルから呼び出されました。");
else alert("CallLevel が別の関数によって呼び出されました:n" CallLevel .caller) ;
}
関数 funCaller(){
CallLevel();
CallLevel()
4. callee 属性
指定された Function オブジェクトの本体である、実行中の Function オブジェクトを返します。
[function.]arguments.callee: オプションの関数パラメーターは、現在実行されている Function オブジェクトの名前です。
注:
callee 属性の初期値は、実行される Function オブジェクトです。
callee 属性は、関数オブジェクト自体への参照を表します。これは、
関数の再帰を隠したり、関数のカプセル化を保証したりするのに役立ちます。この例では、1 から n までの自然数を再帰的に計算します。そして、この属性
は、関連する関数が実行されている場合にのみ使用できます。また、呼び出し先には長さ属性があり、検証のために
が使用されることもあることにも注意してください。 argument.length は実際のパラメータの長さ、arguments.callee.length は
仮パラメータの長さから、呼び出し時の仮パラメータの長さが実際のパラメータの長さと一致しているかどうかを判断できます。
Js コード
//callee can自体を印刷します
function calleeDemo() {
alert(arguments.callee);
}
//パラメータの検証に使用されます
function calleeLengthDemo(arg1, arg2) {
if (arguments .length ==arguments.callee.length) {
window.alert("パラメータの長さと実際の長さが正しいことを確認してください!");
return;
} else {
alert("実際のパラメータの長さ: " argument.length);
alert("仮パラメータの長さ: " argument.callee.length);
}
}
//再帰計算
var sum = function(n){
if (n return 1;
else
return n ＋arguments.callee(n - 1)
}
5.bind
Js コード
var first_object = {
数値: 42
};
var Second_object = {
数値: 24
};
関数 multiply(mult) {
return this.num * mult ;
}
Function.prototype.bind = function(obj) {
var method = this,
temp = function() {
return メソッド。 apply(obj, argument);
return temp;
var first_multiply = multiply.bind(first_object); // 42 * 5
いわゆる「クロージャ」。多数の変数とこれらの変数がバインドされている環境を持ち、これらの変数が式の一部となる式 (通常は関数) を指します。
クロージャに関して、最も簡単に説明すると、ECMAScript では内部関数の使用が許可されています。つまり、関数定義と関数式は別の関数の関数本体に配置されます。さらに、これらの内部関数は、すべてのローカル変数、パラメータ、およびそれらが存在する外部関数で宣言された他の内部関数にアクセスできます。クロージャは、これらの内部関数の 1 つが、それらを含む外部関数の外側で呼び出されるときに形成されます。つまり、内側の関数は外側の関数が戻った後に実行されます。この内部関数が実行されるときも、ローカル変数、パラメーター、および外部関数の他の内部関数にアクセスする必要があります。これらのローカル変数、パラメータ、関数宣言の値は（最初は）外側の関数が戻ったときの値ですが、内側の関数の影響も受けます。
要するに、クロージャの機能は、out 関数が実行されて返された後、JavaScript のガベージ コレクション メカニズム GC が out 関数によって占有されているリソースを再利用するのを防ぐことです。これは、out 関数の内部関数の内部関数が原因で、実行は out 関数の変数に依存します。
クロージャーの 2 つの特徴:
1. 関数変数への参照として - 関数が返されるときにアクティブ化されます。2. クロージャは、関数が戻ったときにリソースを解放しないスタック領域です。
例 1: HTML コード
コードをコピー
コードは次のとおりです:
}
関数 funCaller(){
CallLevel();
CallLevel()
4. callee 属性
指定された Function オブジェクトの本体である、実行中の Function オブジェクトを返します。
[function.]arguments.callee: オプションの関数パラメーターは、現在実行されている Function オブジェクトの名前です。
注:
callee 属性の初期値は、実行される Function オブジェクトです。
callee 属性は、関数オブジェクト自体への参照を表します。これは、
関数の再帰を隠したり、関数のカプセル化を保証したりするのに役立ちます。この例では、1 から n までの自然数を再帰的に計算します。そして、この属性
は、関連する関数が実行されている場合にのみ使用できます。また、呼び出し先には長さ属性があり、検証のために
が使用されることもあることにも注意してください。 argument.length は実際のパラメータの長さ、arguments.callee.length は
仮パラメータの長さから、呼び出し時の仮パラメータの長さが実際のパラメータの長さと一致しているかどうかを判断できます。
Js コード
コードをコピー コードは次のとおりです:
//callee can自体を印刷します
function calleeDemo() {
alert(arguments.callee);
}
//パラメータの検証に使用されます
function calleeLengthDemo(arg1, arg2) {
if (arguments .length ==arguments.callee.length) {
window.alert("パラメータの長さと実際の長さが正しいことを確認してください!");
return;
} else {
alert("実際のパラメータの長さ: " argument.length);
alert("仮パラメータの長さ: " argument.callee.length);
}
}
//再帰計算
var sum = function(n){
if (n return 1;
else
return n ＋arguments.callee(n - 1)
}
5.bind
Js コード
コードをコピー コードは次のとおりです:
var first_object = {
数値: 42
};
var Second_object = {
数値: 24
};
関数 multiply(mult) {
return this.num * mult ;
}
Function.prototype.bind = function(obj) {
var method = this,
temp = function() {
return メソッド。 apply(obj, argument);
return temp;
var first_multiply = multiply.bind(first_object); // 42 * 5
いわゆる「クロージャ」。多数の変数とこれらの変数がバインドされている環境を持ち、これらの変数が式の一部となる式 (通常は関数) を指します。
クロージャに関して、最も簡単に説明すると、ECMAScript では内部関数の使用が許可されています。つまり、関数定義と関数式は別の関数の関数本体に配置されます。さらに、これらの内部関数は、すべてのローカル変数、パラメータ、およびそれらが存在する外部関数で宣言された他の内部関数にアクセスできます。クロージャは、これらの内部関数の 1 つが、それらを含む外部関数の外側で呼び出されるときに形成されます。つまり、内側の関数は外側の関数が戻った後に実行されます。この内部関数が実行されるときも、ローカル変数、パラメーター、および外部関数の他の内部関数にアクセスする必要があります。これらのローカル変数、パラメータ、関数宣言の値は（最初は）外側の関数が戻ったときの値ですが、内側の関数の影響も受けます。
要するに、クロージャの機能は、out 関数が実行されて返された後、JavaScript のガベージ コレクション メカニズム GC が out 関数によって占有されているリソースを再利用するのを防ぐことです。これは、out 関数の内部関数の内部関数が原因で、実行は out 関数の変数に依存します。
クロージャーの 2 つの特徴:
1. 関数変数への参照として - 関数が返されるときにアクティブ化されます。
例 1: HTML コード
コードをコピー
コードは次のとおりです:
< ;script type="text/javascript"> function setupSomeGlobals() { // クロージャ内で終了するローカル変数 var num = 666>// いくつかの参照を格納します。グローバル変数として関数に gAlertNumber = function() {alert(num); } gIncreaseNumber = function() { num ; } gSetNumber = function(x) { num = x; }