jQuery/JavaScript "this"ポインタの混乱

Question

関数barが呼び出されたときの "this"の動作は私を困惑させます。以下のコードを参照してください。 barがhtml要素ではなくクリックハンドラから呼び出されたときに、 "this"が普通の古いjsオブジェクトインスタンスになるように手配する方法はありますか？

// a class with a method 

function foo() { 

    this.bar(); // when called here, "this" is the foo instance 

    var barf = this.bar; 
    barf(); // when called here, "this" is the global object 

    // when called from a click, "this" is the html element 
    $("#thing").after($("<div>click me</div>").click(barf)); 
} 

foo.prototype.bar = function() { 
    alert(this); 
} 

Answer 1

はの世界へようこそjavascript！ ：D

あなたはjavascriptスコープとクロージャの領域にさまよっています。短い答えを

：

this.bar() 

は

var barf = this.bar; 
barf(); 

を下に実行される（このがFOOを指す）、FOOの範囲の下に実行されます。グローバルスコープ。

this.barは、基本的に意味する：

はこの（FOO）の範囲に、this.barが指し示す機能を実行します。 this.barをbarfにコピーしてbarfを実行したとき。 Javascriptはbarfが指す関数を実行するように解釈され、というが存在しないため、グローバルスコープで実行されます。

これを修正するには、あなたがこのような何かに

barf(); 

を変更することができます。

barf.apply(this); 

これは、それを実行する前に嘔吐するこのの範囲をバインドするためにJavascriptを伝えます。

jqueryイベントでは、匿名関数を使用するか、プロトタイプでバインド関数を拡張してスコープをサポートする必要があります。

詳細情報については：

• Good explanation on scoping
• Extending jQuery bind to supportscoping

Answer 2

このは、機能が接続されていることを常にインスタンスであるためです。 EventHandlerの場合、イベントをトリガしたクラスです。

あなたはこのような無名関数を使って自己を助けることができる：

function foo() { 
    var obj = this; 
    $("#thing").after($("<div>click me</div>").click(function(){obj.bar();})); 
} 

foo.prototype.bar = function() { 
    alert(this); 
} 

Answer 3

あなたはthisが参照すべきかを設定する機能にFunction.applyを使用することがあります。

$("#thing").after($("<div>click me</div>").click(function() { 
    barf.apply(document); // now this refers to the document 
}); 

Answer 4

QuirksModeで入手可能なJavaScriptでthisキーワードの良い説明があります。

Answer 5

あなたはこのかもしれません：

Controlling the value of 'this' in a jQuery event

またはこの：

http://www.learningjquery.com/2007/08/what-is-this

便利に。

Answer 6

本を入手してください：JavaScript：良い部品。

はまた、http://www.crockford.com/javascript/

Answer 7

this.bar(); // when called here, "this" is the foo instance 

fooがないコンストラクタとして、通常の関数として使用する場合、このコメントが間違っているダグラス・クロックフォード であなたができる限り多くをお読みください。 ここに：

foo();//this stands for window