js apply/call/caller/callee/bindの使い方と違い分析_javascriptスキル

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

コードをコピー コードは次のとおりです:

コード
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 コード
コード

コードをコピー コードは次のとおりです。

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 に渡されるオブジェクトでもあります。次のパラメータは、現在のオブジェクトに渡されるパラメータです。
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 オブジェクトは、実行される関数の名前です。
注: 関数の場合、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 コード



コードをコピー


コードは次のとおりです:

< ;script type="text/javascript"> function setupSomeGlobals() { // クロージャ内で終了するローカル変数 var num = 666>// いくつかの参照を格納します。グローバル変数として関数に gAlertNumber = function() {alert(num); } gIncreaseNumber = function() { num ; } gSetNumber = function(x) { num = x; }

生成 - setupSomeGlobals()
値 - gAlertNumber ()
増加 - gIncreaseNumber()
;値 5 を割り当てます - gSetNumber(5)


例 2:
HTML コード

コードをコピー コードは次のとおりです:

< ;script type="text/javascript">
function newClosure(someNum, someRef) {
// クロージャ内で終了するローカル変数
var num = someNum>var anArray; = [1 ,2,3];
var ref = someRef;
num = x; : ' num
' nanArray ' anArray.toString()
' nref.someVar ' ref.someVar);
}
}
var Closure1 = newClosure(40, {someVar:' Never -online' })
var Closure2 = newClosure(99, {someVar:' BlueDestiny'})
closure1(4)
closure2(3)
>
例 3:
Js コード

コードをコピー

コードは次のとおりです: /* グローバル変数 getImgInPositionedDivHtml を宣言し、一度に外部関数式を呼び出すことによって返される内部関数を割り当てます。 この内部関数は、IMG 要素を囲む絶対位置の DIV 要素を表す HTML 文字列を返します。すべての変更可能な属性値は、この関数を呼び出すときにパラメーターによって提供されます:

*/

var getImgInPositionedDivHtml = (function(){
/* 外部関数式のローカル変数 - buffAr - はバッファー配列を保持します。この配列は 1 回だけ作成され、生成された配列インスタンスは内部で使用されます。
は常に利用可能であるため、この内部関数が呼び出されるたびに利用可能になります。
の空の文字列はデータ プレースホルダーとして使用され、対応するデータ
が内部関数によってこれに挿入されます。配列:
*/
var buffAr = [
'

'', //インデックス 13, IMG 幅
'" height="',
'', //index 15, IMG alt text content
'" alt="',
'', //index 17, IMG alt text content
'">

'
];
/* 関数式の評価結果である内部関数オブジェクトを返します。
この内部関数は毎回実行される関数ですそれは
- getImgInPositionedDivHtml( ... ) -
*/
return (function(url, id, width, height, top, left, altText){
/* に異なるパラメータを挿入しますそれに応じてバッファ配列 位置:
*/
buffAr[1] = id;
buffAr[5] = 左; buffAr[7] = 幅);
buffAr[9] = 高さ);
buffAr[17] =
/*空の文字列を使用して返されます (配列要素の連結と同等)
配列の各要素を連結して形成された文字列:
*/
return buffAr.join('')
}); /: 内部関数式の終了。
})();//自己呼び出し
alert(getImgInPositionedDivHtml);//返された関数を表示
alert(getImgInPositionedDivHtml("img.gif","img",100,50,0, 0 ,"Test"));



説明: 重要なトリックは、代わりに、インライン関数式を実行して追加の実行環境を作成することです。外部コードで使用される関数として関数式によって返される内部関数。このとき、バッファ配列は関数式のローカル変数として定義されます。関数式は一度だけ実行する必要があり、配列は一度作成されると、それに依存する関数で再利用できます。
7. プロトタイプ チェーン
ECMAScript は、オブジェクト タイプの内部 [[prototype]] 属性を定義します。このプロパティにはスクリプトから直接アクセスできませんが、プロパティ アクセサーの解析プロセス中に、この内部 [[prototype]] プロパティによって参照されるオブジェクト チェーン (プロトタイプ チェーン) が必要になります。内部 [[prototype]] プロパティに対応するプロトタイプ オブジェクトは、パブリック プロトタイプ プロパティを通じて割り当てまたは定義できます。
例 1:
Js コード

コードをコピー


コードは次のとおりです: