转义 JavaScript 事件范围

Question

我不熟悉 JavaScript 作用域的方式，所以这是我的问题：

"use strict";

function Explorer(xPos, yPos) {

    // Inheritance
    GraphicsEntity.call(this, {
        x: xPos,
        y: yPos,
        width: 32,
        height: 32
    });

    // Local fields
    var _texture = new Image();

    // Contruct
    _texture.addEventListener("load", function() {

        this.graphics.drawImage(_texture, 0, 0);

    }, false);

    _texture.src = "explorer.png";

}

这会抛出异常：

未捕获的类型错误：无法调用未定义的方法“drawImage”

我知道这是由于 JavaScript 作用域的方式，因为“this”现在指的是“_texture”字段。 如您所见，Explorer（某种类似玩家的对象）继承自 GraphicsObject，而 GraphicsObject 又具有属性 graphics（画布元素的上下文）。

我找到了解决这个问题的方法，但在我看来它有点脏：

"use strict";

function Explorer(xPos, yPos) {

    // Inheritance
    GraphicsEntity.call(this, {
        x: xPos,
        y: yPos,
        width: 32,
        height: 32
    });

    // Local fields
    var _texture = new Image();
    var _graphics = this.graphics;

    // Contruct
    _texture.addEventListener("load", function() {

        _graphics.drawImage(_texture, 0, 0);

    }, false);

    _texture.src = "explorer.png";

}

所以现在一切都按预期工作了，图像被整齐地绘制到画布元素上。 唯一的问题是我现在有了另一个我并不真正想要的“图形”的引用。

所以我的问题是： 有没有办法让“this”引用 Explorer 对象，或者强制改变范围？

Answer 1

你也可以使用 bind 将上下文绑定到函数作用域

“使用严格”；

函数资源管理器(xPos, yPos) {

// Inheritance
GraphicsEntity.call(this, {
    x: xPos,
    y: yPos,
    width: 32,
    height: 32
});

// Local fields
var _texture = new Image();

// Contruct
_texture.addEventListener("load", function() {

    this.graphics.drawImage(_texture, 0, 0);

}.bind(this), false);

_texture.src = "explorer.png";

}

Answer 2

你还没有显示函数GraphicsEntity，但我很确定问题是这样的：

GraphicsEntity.call(this, {

在您的函数Explorer 中，this 将是全局对象（好吧，除非还使用call 调用了Explorer），这就是对call 的调用将this 设置为GraphicsEntity。这可能就是您收到该异常的原因。

另外，GraphicsEntity 是一个对象，还是一个函数？我问是因为call 期待一个函数。 call 调用给定的函数，将第一个参数设置为this 值，随后的参数作为该函数的参数传递。

编辑

正如 Esailija 已经说过的，this 值在您的加载事件回调中与函数开头的值不同。将 this 的值保存到函数开头的局部变量中，并在回调中使用 that。

Answer 3

一种可能的解决方案是使用包装函数，该函数将创建您需要的上下文并捕获您的状态。

如：

function draw(me) {
    me.graphics.drawImage(_texture, 0, 0);
}

function wrapper(me) {
    return function () { draw(me) };
}

...
_texture.addEventListener('load', wrapper(this));
...

它是否比您的解决方案更简洁？这值得商榷，但您可以使其足够通用，以便在其他情况下重复使用。

Answer 4

this 始终是函数的本地函数，每次调用函数时都会根据函数的调用方式对其进行评估。在这种情况下，浏览器调用函数并将this 设置为_texture 指向的图像对象。

由于普通变量是从外部范围查找的，您可以简单地将旧的this 保存到某个变量中：

function Explorer(xPos, yPos) {
    var self = this;

    // Inheritance
    GraphicsEntity.call(this, {
        x: xPos,
        y: yPos,
        width: 32,
        height: 32
    });

    // Local fields
    var _texture = new Image();
    // Contruct

    _texture.addEventListener("load", function () {
        self.graphics.drawImage(_texture, 0, 0);
    }, false);

    _texture.src = "explorer.png";
}