1

私の問題は、関数を特定のオブジェクトのリスナーとして追加しようとすると、this呼び出されている関数が作成されたスコープが考慮されないことです。

ライブデモ: http://jsfiddle.net/Ht4x9/

ご覧のとおりshowAct()、「MyActivity」が表示されますが、赤をクリックしても表示<div>されません。結果は次のとおりです。 MyActivity
undefined

<div>クリックして印刷するにはどうすればよいですか？関数の引数としてオブジェクトを渡すことは本当に必要ですか? できるだけきれいに仕上げたいと思います。

念のため以下にコードを貼り付けます

ありがとうございました！

JS

var activity = 'MyActivity';

var Screen = {
    act: activity,

    _privFunc: function()
    {
        console.log(this.act);
    },

    publicFunc: function()
    {
        $('div').on('click', this._privFunc);
    },

    showAct: function()
    {
        this._privFunc();
    }
}

Screen.publicFunc();
Screen.showAct();

HTML + CSS

<div>CLICK</div>

div { background: red; width: 100px; height: 100px; cursor: pointer; font-weight: bold
4

3 に答える 3

4

イベントハンドラーがデフォルトで実行されるthisと、ハンドラー内でハンドラーが登録されている dom 要素が参照されます。あなたの場合、コールバック関数を実行するためにカスタム実行コンテキストを使用する必要があります。これは、$.proxy()を使用して行うことができます

jQuery: $.proxy()

$('div').on('click', $.proxy(this._privFunc, this));

アンダースコア: bind()

$('div').on('click', _.bind(this._privFunc, this));

最新のブラウザ: bind()

$('div').on('click', this._privFunc.bind(this));
于 2013-10-28T00:57:48.020 に答える
2

bind最初のパラメーターを使用して、目的のターゲットに設定するだけですthis。

Arun が提案したように、jQuery を使用していてレガシー ブラウザーを提供している場合、$.proxyは適切な選択です。

于 2013-10-28T00:58:37.410 に答える