JavaScriptのこのキーワードについて（翻訳自己理解）_javascriptスキル

以下のコンテンツの約 70% は http://www.quirksmode.org/js/this.html からのもので、残りの 30% は私自身の理解と感想です。困っている方へ少しでもお役に立てれば幸いです。 。 。

まず、このキーワードに関する典型的な質問を見てみましょう:

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

var name = 'hong'
var obj = {
name: 'ru',
getName: function(){
return function(){
return this.name;
}
}
alert(obj.getName()()); ここでは大したことではありません、実行結果は：hong
コードを少し変更します:

コードをコピーします

コードは次のとおりです: var name = 'hong' var obj = {

name: 'ru',

getName: function(){
var that = this; function(){
その .name を返します;
}
}
alert(obj.getName()());


結果は: ru
実行結果は:ru

この結果の理由については、以下で詳しく説明します。
[関数の所有者]

これを説明するには、まずこの概念を説明する必要があります。 JavaScript では、これは常に、現在実行している関数の「所有者」を指します。より正確には、この関数をメソッドとして使用するオブジェクトを指します。
この文を理解するには、次の例を見てみましょう:




コードをコピー

コードは次のとおりです: /* -- test1 -- */ function test1 () { this.title = 'me'; alert(window['title']); 🎜>alert (this === window); //true

}

test1();



実行結果は次のとおりです: me, true
上の例では、これは window オブジェクトを指します。そして、window オブジェクトの title 属性を「me」と記述します。test1 はトップレベル関数であるため、その所有者は window オブジェクト、または window オブジェクトのメソッドになります。これを理解するのは難しくありません。たとえば、上記の test1() を呼び出す場合は、 window.test1(); と記述することもできます。

次に、div を作成し、メソッドとして test1 を div の onclick 属性に割り当てます。

コードをコピー


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

me! div> /* -- test1 -- */ function test1 () { this.title = 'me'; >alert( window['title']);

alert(this === window);

}
var o = document.getElementById('o'); ;



div をクリックした結果は次のようになります。同時に、firebug を使用して、「me」の属性値が実際には、ID が 'o' の HtmlObject


に割り当てられます。明らかに、これはこの時点で div を指します。つまり、test1() の所有者が div の HtmlObject になります。 、または呼び出す div の onclick メソッドになります。この状況はまだ理解しやすいはずです。
次にコードを変更します。1 か所だけ変更します:

コードをコピーします

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

o.onclick = test1(); // 注: ここに括弧が追加されています 上記のコードの最後の文をこれに変更すると、 div は: me, true 最初の状況と同じになり、これはウィンドウを指します。違いがないと疑問に思う人もいるかもしれませんが、実際には違いがあります。これには、コピー機能と参照機能の問題が関係します。 【関数のコピー】

を通してコードをコピーすると、コードは次のようになります。

o.onclick = test1; このようにして、関数 test1() がオブジェクト o の onclick 属性に実際にコピーされます。したがって、test1 の所有者は o オブジェクトになります。

を介してコードをコピーすると、コードは次のようになります:

o。 onclick = test1() ;
このように、本質的には、クリックイベントのハンドルを取得したら、test1()関数の実行を指示することになります。実行に割り当てるのではなく、実行をガイドすることに注意してください。 test1() の所有者は変更されておらず、ウィンドウのままです。

[関数の参照]
上記と同様に、HTML にインラインで呼び出しを記述して呼び出しても、参照のままです。メソッド

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

me!

div をクリックした実行結果これはまだウィンドウを指していることを示しています。
[関数コピーの例]

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

element.onclick = doSomething
element.addEventListener('click',doSomething,false)
element.onclick = function () {this.style.color = '#cc0000';}

これらのメソッドは、this のポインタを現在呼び出されているオブジェクトに変更します。
[関数の参照例]

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

element.onclick = function () {doSomething()}
element.attachEvent('onclick',doSomething)

メソッド 関数の所有者は変更されません。attachEvent は関数をコピーするのではなく、doSomething への参照を実際に確立するため、addEventListener とattachEvent は矛盾していることに注意してください。

[call メソッドを使用する]
先ほど述べたように、 を記述しても test() の所有者を にすることはできません。これを行うことができます

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

function (o) {
o.title = 'me';
}

このような明示的な呼び出しは問題ありません。あるいは、call または apply を使用して継承メソッドを偽装することもできます

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

function test () {
this.title = 'me';

これは、オブジェクトのなりすましの最も典型的な方法でもあります。

【自由変数問題】
長々と書いたので元の問題に戻りましょう:

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

var name = 'hong'

var obj = {
name: 'ru',
getName: function(){
return function(){
return this.name;
}
}
alert(obj.getName()()); > この方法で得られた結果が「hong」になるのはなぜですか?フォーカスは

コードをコピーします

コードは次のとおりです: return function() { return this .name; };

上記の関数参照の例を比較すると、返された匿名関数の呼び出しメソッドが同じであることがわかります。 onclick = function () {doSomething()} 同じです。したがって、このメソッドはこの関数の所有者を変更しません。これは入れ子関数ですが、その宣言はトップレベルです。このうち、これは窓口を指します。
2 番目の方法は、getName() 内の that に this を強制的に割り当てることです。つまり、that.name は実際には getName() 内の this.name と同じになります。 getName のコンテキストでは、その所有者はオブジェクト obj なので、これは obj を指すことになるので、 this.name === obj.name
という大きな循環を経てきましたが、どうかはわかりません。私はあなたに明らかにしました。

実際、これは次のように要約できます。 this が配置されている関数コンテキストで、この関数が「メソッド」の形式で呼び出されない場合、これは window オブジェクトを指します。それ以外の場合、これはウィンドウ オブジェクトを指します。この関数の所有者を指します。