5

私はオブジェクトを持っています。「Hello!」を知らせるボタンを初期化します。クリックされたとき。なぜこれがうまくいかないのですか？

jsfiddle: http://jsfiddle.net/kUT52/1/

HTML

<button>Test</button>

JS

var MyObject = {
  testValue: "Hello!",

  testFunction: function() {
    alert(this.testValue);
  },

  init: function(button) {
    button.click(this.testFunction());
  }
}

$(document).ready(function(){
  var buttonInstance = new MyObject();
  var button = $('button');
  buttonInstance.init(button);
});
4

3 に答える 3

11

()関数参照を後ろに置くときはいつでも、関数を実行しています。関数が返すものではなく、関数参照を に渡す必要があり.clickます (関数がイベント ハンドラーとして使用する関数を返す場合を除きます)。

例：

button.click(this.testFunction);

しかし、別の問題があります。関数内ではthis、オブジェクトではなく DOM 要素を参照するため、アクセスするthis.testValueと が返されundefinedます。

これを修正するには、jQuery の$.proxy関数を使用できます。

button.click($.proxy(this.testFunction, this));

thisはオブジェクトを参照し、クリックした要素への参照を 経由で取得できますevent.target。

于 2013-06-28T20:21:02.793 に答える
4

理由は 2 つあります。

  • イベントをバインドするときtestFunction()の代わりに使用しているため、関数を呼び出して (未定義の) 戻り値をバインドします。testFunction

  • メソッドを関数として使用すると、オブジェクトに関連付けられなくなるため、コールバックが呼び出されたときのコンテキストはオブジェクトではなく、グローバルwindowオブジェクトになります。

メソッドを使用proxyして、正しいコンテキストでメソッドを呼び出す関数を作成します。

button.click($.proxy(this.testFunction, this));
于 2013-06-28T20:21:10.947 に答える
1

これはオブジェクト リテラルであり、通常は次のように使用します。

var MyObject = {
    testValue: "Hello!",

    testFunction: function() {
        alert(MyObject.testValue);
    },

    init: function(button) {
        button.on('click', this.testFunction);
    }
}

var button = $('button');
MyObject.init(button);

フィドル

またはオブジェクトを渡す：

var MyObject = {
    testValue: "Hello!",

    testFunction: function(e) {
        alert(e.data.obj.testValue);
    },

    init: function(button) {
        button.on('click', {obj: this}, this.testFunction);
    }
}

var button = $('button');
MyObject.init(button);

フィドル

于 2013-06-28T20:18:55.093 に答える