27

JavaScript の操作で混乱することの 1 つは、this

var x = {  
  ele : 'test',
  init : function(){ 
    alert(this.ele);
  }
}

ただし、複数のオブジェクト、特にイベント コンテキストのthis変更を処理する場合、追跡/理解を維持するのが難しくなります。

したがって、誰かがより良いインプット/ガイドライン/考え/より良いプラクティスを持っている場合は、共有してください. thisまた、使用すると（パフォーマンス）利点が得られるかどうかを知りたいですか？

4

5 に答える 5

28

それはパフォーマンスではなく、オブジェクトの特定のインスタンスのプロパティにアクセスすることです:-

x.init()

関数で使用していない場合、「test」は表示されませんthis。

事実上、上記の行は次と同じです:-

x.init.call(x);

を使用する最初のパラメーターは、関数の実行時にcall割り当てられます。this

今考えてみましょう：-

var fn = x.init;  //Note no () so the function itself is assigned to the variable fn
fn();

これで、アラートに何も表示されなくなりました。これは、上記が効果的であるためです:-

fn.call(window);

ブラウザでホストされる Javascript では、windowオブジェクトはグローバル オブジェクトと同義です。関数が "in the raw" で呼び出されると、thisデフォルトでグローバル オブジェクトになります。

古典的なエラーは、次のようなことをしています:-

var x = {
   ele: 'test';
   init: function(elem) { 
      elem.onclick = function() { alert(this.ele); }
   }
}
x.init(document.getElementById('myButton'));

ただし、onclick イベントに関連付けられた関数が次のようなコードを使用してブラウザーによって呼び出されるため、これは機能しません。

onclick.call(theDOMElement)

したがって、関数が実行されているときはthis、あなたが思っているものではありません。

この状況に対する私の通常の解決策は次のとおりです。

var x = {
   ele: 'test';
   init: function(elem) {
      var self = this; 
      elem.onclick = function() { alert(self.ele); }
      elem = null;
   }
}
x.init(document.getElementById('myButton'));

elem = nullIE メモリ リークの回避策であることに注意してください。

于 2010-01-27T16:22:05.723 に答える
6

とても紛らわしいです。関数の呼び出し方法によって異なります。Doug Crockford は、著書Javascript, the Good Partsで優れた記事を書いています。その要点は、そうでなければうまく定式化されていない質問に対するこの優れた回答にあります。

いいえ、それはパフォーマンスに関するものではありません。

于 2010-01-27T16:22:32.177 に答える
3

私にとって、それは次のガイドラインに大いに役立ちましたthis。owner関数が割り当てられた変数名を所有するオブジェクトは、 になりますthis。誰がそれを所有しているのかわからない場合は、thisウィンドウになります。

于 2010-01-29T10:10:53.920 に答える
2

thisキーワードに関する有益で有益な記事はこれです (しゃれは意図されていません)。記事はあなたのために物事を片付けるかもしれません、私はそれが私のためにしたことを知っています.

本質的なルールはthis、関数内のキーワードは常に関数の所有者を参照することであり、結果を理解するための鍵は、関数がいつ参照され、いつコピーされるかを理解することです。例については、前述の記事を参照してください。

于 2010-01-27T16:25:02.380 に答える
2

使用する

var me = this;

の外側

function(){

次に、 function() 内で私を参照できます

于 2010-01-27T16:28:39.953 に答える