Question

我有一个像这样的视图模型：

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事件被触发时，此对象等于 CANVAS 对象，不是RemixView 。所以我得到的错误是：

this.getHoveredObject is not a function

这种情况下的正确方法是什么？

Answer 1

通常的方法是对回调使用一个简单的闭包，并在闭包可以引用的局部变量中捕获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，可以使用arrow function：

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

Answer 2

你想要bind处理函数：

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

请注意，这可能不适用于旧版浏览器，但这些浏览器有polyfills。

Answer 3

让prototype成为一个功能。

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

使用事件侦听器从对象调用函数

3 个答案: