JavaScript function_js オブジェクト指向内で指す this ポインターを変更する 3 つの方法-jsチュートリアル-php.cn

JavaScript function_js オブジェクト指向内で指す this ポインターを変更する 3 つの方法

WBOY

リリース： 2016-05-16 18:28:53

オリジナル

1610 人が閲覧しました

多くの情報を確認した結果、次の 3 つのルールをまとめました。これらの 3 つのルールは、これまでに遭遇したすべての問題を解決できます。
ルール 0: 関数自体は特殊な型であり、ほとんどの場合、解決できます。変数として考慮されます。

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

 
function a() 
{ 
alert(this); 
} 

 または 
var a = function() 
{ 
alert(this); 

 

これは変数を作成するものと考えることができ、この変数の値は関数です。

ルール 1: 関数がオブジェクトのキー値である場合、this はこのオブジェクトを指します。このルールは理解しやすいです:

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

var a = function(obj) 
{ 
alert(this == obj) 
} 

var o = {}; .afun = a; 
o.afun(o); //true 

 

関数は変数ですが、オブジェクトにバインドできます。 o オブジェクト。
ここで、バインドされたオブジェクトがない場合、これはデフォルトでウィンドウオブジェクトを指すことに注意する必要があります。
いくつかの例:

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

関数 a ()

{ 
//this == window 
} 

function a() 
{ 
//this == window 
function b() 
 { 
//this == window 
} 
} 

 
バインディングは、上記のネストされた関数のように推移的ではないことにも注意する必要があります。 o オブジェクトの場合、それは a 関数 

に影響し、b は依然としてウィンドウを指します。

ルール 2: 関数 new が呼び出される場合、オブジェクトが作成され、これは新しく作成されたオブジェクトを指します。

var o = new a();
この時点では、o は関数ではなくなりますが、実際にはそのような処理として考えることができます。
オブジェクトを作成します var o = {};
次に、これを o にポイントし、これを通じて o を初期化します。

ルール 3: apply を通じて this のポインタを変更できます
この apply のバインディングは、実際には apply の関数と似ています。下記の機能を搭載しています。

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

var a = function (obj)

{ 
alert(this == obj); 
obj.fun = a; 
obj.fun(obj);//true 

 
 , ok a.apply(obj, [obj]); // true 

javascript では、バインドする場所がない場合、デフォルトでウィンドウがバインドされます。

包括的な例: jquery にはそれぞれ非常に一般的に使用される関数があり、ループされたオブジェクト要素をこれにバインドして簡単に操作できます。
これは簡単なデモです:

コード

コードをコピーしますコードは次のとおりです。 function each(tagName, callback)

{

var lists = document.getElementsByTagName(tagName); 
for (var i = 0; i { 
callback.apply(lists[i]) 
} 
} 
each("a", 
function () 
{ 
this .style.color = "red"; 
} 
); 

 
ヘッダー ナビゲーションのすべてのリンクが赤色になっていることがわかります。