1

私は次のようなビューモデルを持っています:

CANVAS = getElementById...

RemixView = function(attrs) {
     this.model = attrs.model;
     this.dragging = false;
     this.init();
};

RemixView.prototype = {
    init: function() {
        CANVAS.addEventListener("click", this.handleClick);
    },
    handleClick: function(ev) {
        var obj = this.getHoveredObject(ev);
    },
    getHoveredObject: function(ev) {}
    ...
    ...
}
rv = new RemixView()

問題は、 clickHandler イベントが発生したときです。このオブジェクトはRemixView ではなくCANVASオブジェクトと同じです。したがって、次のようなエラーが表示されます。

this.getHoveredObject は関数ではありません

その状況での正しいアプローチは何ですか？

4

3 に答える 3

4

通常のアプローチは、コールバックに単純なクロージャーを使用thisし、クロージャーが参照できるローカル変数に適切な値をキャプチャすることです。

RemixView.prototype = {
    init: function(this) {
        var _this = this;
        CANVAS.addEventListener("click", function(ev) {
            return _this.handleClick(ev);
        });
    },
    //...
};

Function.prototype.bindバインドされた関数を作成するために使用することもできます ( user123444555621のように):

RemixView.prototype = {
    init: function(this) {
        CANVAS.addEventListener("click", this.handleClick.bind(this));
    },
    //...
};

または、ES6 を使用する場合は、アロー関数を使用できます。

RemixView.prototype = {
    init: function(this) {
        CANVAS.addEventListener("click", ev => this.handleClick(ev));
    },
    //...
};
于 2012-06-16T21:08:53.733 に答える
1

ハンドラー関数をバインドします。

CANVAS.addEventListener("click", this.handleClick.bind(this));

これは古いブラウザーでは機能しない可能性があることに注意してください。ただし、これらのブラウザーにはポリフィルがあります。

于 2012-06-16T21:18:16.440 に答える
0

関数を作成prototypeします。

RemixView.prototype = function () {
    init: function() {
        CANVAS.addEventListener("click", this.handleClick);
    },
    handleClick: function(ev) {
        var obj = this.getHoveredObject(ev);
    } ///...
//...
}
于 2012-06-16T21:21:27.883 に答える