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

多くの情報を確認した結果、次の 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";
}
);


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