Question

我试图从事件功能中访问对象的成员。对不起，如果我做错了，我是初学者：）

我有这样的事情：

function MyObject( canvas )
{
    this.value  = 'Hello World';
    this.canvas = canvas;
    this.canvas.addEventListener( 'mousemove', this.mouseMove );
}

MyObject.prototype.mouseMouse = function( evt )
{
    // this is the canvas
    var context = this.getContext( '2d' );
    context.fillText( /* how to get MyObject's value? */ , 0, 0 );
}

感谢。

Answer 1

需要在对象实例的上下文中调用回调函数。对于现代浏览器，您可以使用Function.prototype.bind，它返回绑定到特定上下文的函数：

this.canvas.addEventListener( 'mousemove', this.mouseMove.bind(this) );

简单来说，当从MyObject.prototype.mouseMove调用addEventListener时，函数中this的值将是canvas实例。您希望this的值改为MyObject实例。

为了解决这个问题，我们传递一个函数，它是我们实际想要调用的函数的包装器。 this.mouseMove.bind(this)创建一个包含mouseMove函数的新函数，以便this值是对象实例而不是画布。

另一种方法是创建一个匿名函数包装器：

...
var self = this;
this.canvas.addEventListener( 'mousemove', function (e) {
    self.mouseMove(e);
} );

这种格式的缺点是你需要知道有多少参数传递给函数，以便将它们传递给内部函数调用。

解决这个问题的方法是Function.prototype.apply：

var self = this;
this.canvas.addEventListener( 'mousemove', function () {
    //cast arguments to an array for cross-browser compatibility
    var args = Array.prototype.slice.call(arguments);
    return self.mouseMove.apply(self, args);
} );

现在，如果你经常编写那种代码，你会发现有一种简单的方法可以抽象出变量，你需要的只是一个函数和一个上下文，你可以生成一个包装器。这就是Function.prototype.bind所做的。

Answer 2

您有几个选项可以在事件侦听器中保留MyObject上下文。 bind就是那个，这是另一个：

function MyObject(canvas) {
    this.value  = 'Hello World';
    this.canvas = canvas;

    var self = this;
    this.canvas.addEventListener('mousemove', function(e) {
        self.mouseMove(e);
    });
}

Answer 3

它非常简单，看起来你已经明白了！

this.value

从原型获取对象实例

3 个答案: