3

単一のメソッドを使用して JavaScript でクラスを定義しました。

function MyClass(text) {
    this.text = text;
}

MyClass.prototype.showText = function() {
    alert(this.text);
}

次に、jQuery を使用して、クリック イベントのハンドラーとして機能するメソッドを定義しました。

function MyClass(text) {
    this.text = text;
    $('#myButton').click(this.button_click);
}

MyClass.prototype.showText = function() {
    alert(this.text);
};

MyClass.prototype.button_click = function() {
    this.showText();
};

ボタンをクリックすると、次のように言って失敗します：

オブジェクト #<HTMLInputElement> にはメソッド 'showText' がありません

jQueryのクリックイベントハンドラはHTML要素そのものを参照しており、オブジェクトthisのインスタンスを参照していないようです。MyClass

どうすればこの状況を解決できますか?

利用可能な jsFiddle: http://jsfiddle.net/wLH8J/

4

2 に答える 2

11

これは予想される動作です。次を試してください。

function MyClass(text) {
    var self = this;

    this.text = text;
    $('#myButton').click(function () {
      self.button_click();
    });
}

または新しいブラウザー ( bindを使用):

function MyClass(text) {
    this.text = text;
    $('#myButton').click(this.button_click.bind(this));
}

またはjqueryプロキシを使用：

function MyClass(text) {
    this.text = text;
    $('#myButton').click($.proxy(this.button_click, this));
}

参考文献：

于 2012-05-15T08:20:55.873 に答える
2

this関数が定義されたときではなく、関数が呼び出されたときに決定されます。関数をクリック ハンドラーにコピーしたため、呼び出されたときに関連付けられておらず、目的の関数ではありませMyClassんthis。

thisの値を別の変数に格納するには、クロージャーを使用する必要があります。

function MyClass(text) {
    this.text = text;
    var self = this;
    var click_handler = function () { self.button_click(); };
    $('#myButton').click(click_handler);
}
于 2012-05-15T08:21:11.150 に答える