ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript function_js オブジェクト指向内で指す this ポインターを変更する 3 つの方法

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

WBOY
リリース: 2016-05-16 18:28:53
オリジナル
1642 人が閲覧しました

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


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