25

bar関数が呼び出されたときの「this」の動作は私を困惑させます。以下のコードを参照してください。バーが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);
}
4

7 に答える 7

36

JavaScriptの世界へようこそ！:D

JavaScript のスコープとクロージャーの領域に迷い込んでしまいました。

簡単な答えは次のとおりです。

this.bar()

fooのスコープで実行されます(これはfooを参照するため)

var barf = this.bar;
barf();

グローバルスコープで実行されます。

this.bar 基本的には次のことを意味します。

this.bar が指す関数をthis (foo) のスコープで実行します。this.bar を barf にコピーしたら、barf を実行します。Javascript は、barf が指す関数を実行すると解釈され、thisがないため、グローバル スコープで実行されるだけです。

これを修正するには、変更できます

barf();

このようなものに：

barf.apply(this);

これは、実行する前にthisのスコープを barf にバインドするよう Javascript に指示します。

jquery イベントの場合、匿名関数を使用するか、スコープをサポートするためにプロトタイプで bind 関数を拡張する必要があります。

詳細については:

于 2009-04-02T16:55:37.507 に答える
5

QuirksModethisで利用可能な JavaScript のキーワードに関する適切な説明があります。

于 2009-04-02T16:58:10.450 に答える
3

あなたはこれを見つけるかもしれません：

jQuery イベントで「this」の値を制御する

またはこれ：

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

使える。

于 2009-04-02T16:59:40.477 に答える
2

Function.apply関数で使用して、何thisを参照するかを設定できます。

$("#thing").after($("<div>click me</div>").click(function() {
    barf.apply(document); // now this refers to the document
});
于 2009-04-02T16:46:05.313 に答える
1

これは、これが常に関数がアタッチされているインスタンスであるためです。EventHandlerの場合、イベントをトリガーしたのはクラスです。

次のような無名関数を使用して、自分自身を助けることができます。

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

foo.prototype.bar = function() {
  alert(this);
}
于 2009-04-02T16:41:47.320 に答える
0 
this.bar();  // when called here, "this" is the foo instance

コンストラクタとしてではなく、通常の関数として foo を使用する場合、このコメントは間違っています。ここ：

foo();//this stands for window
于 2014-02-01T03:00:18.127 に答える