Javascript 原型；这"；不工作（JS）

试图用Image（）对象执行.onload方法，显然它没有在函数中继承“this”。有什么帮助吗

function UI() {
    this.canvas_obj = document.getElementById('game');
    this.canvas = this.canvas_obj.getContext('2d');
    this.imgcache = {};
    this.imglist = [
        'rooms/main-square.png'
    ];
    for (var i = 0; i < this.imglist.length ; i++) {
        var img = new Image();
        img.src = this.imglist[i];
        this.imgcache[this.imglist[i]] = img;
    }
}

// snip //

/*
 * drawImg
 * Draws an image on the canvas at the specified x, y (if the image isn't in the pre-cache, it creates it as well)
 * @param str   image path
 * @param array x,y
 * @param array width, height
 */
UI.prototype.drawImg = function(path, coords, size) {
    var found = false;
    if (size == undefined) {
        var w = 0;
        var h = 0;
    } else {
        var w = size[0];
        var h = size[1];
    }
    for (var i = 0; i < this.imgcache.length ; i++) {
        if (path == this.imgcache[i].src) {
            found = true;
        }
    }
    if (!found) {
        var img = new Image();
        img.src = path;
        this.imgcache[path] = img;
    }
    if (w == 0 && h == 0) {
        this.imgcache[path].onload = function() {
            this.canvas.drawImage(this.imgcache[path], coords[0], coords[1], this.imgcache[path].width, this.imgcache[path].height);
        };
    } else {
        this.imgcache[path].onload = function() {
            this.canvas.drawImage(this.imgcache[path], coords[0], coords[1], w, h);
        };
    }
}

函数UI（）{
this.canvas_obj=document.getElementById（'game'）；
this.canvas=this.canvas_obj.getContext（'2d'）；
this.imgcache={}；
this.imglist=[
“rooms/main square.png”
];
for（var i=0；i

对于JavaScript中的每个变量，

此

的范围与您所处的函数相关。那么，在什么时候

this.imgcache[path].onload = function() {
     // ...   
};

此

将绑定到对象

imgcache[path]

。一种常见的方法是将

this

的值保存在另一个变量中（按照惯例，通常是

that

），以便在嵌套函数中访问它：它被称为

---

现在，这是由于JavaScript如何在函数调用时绑定

this

值。可以使用或将此绑定到另一个值。

函数的this关键字的值由函数的调用方式设置。在UI实例上调用drawImg方法时，例如：

var fooUI = new UI(...);
fooUI.drawImg(...);

然后在方法fooUI.drawImg中，this关键字将引用fooUI

在该方法中，有一个onload属性的赋值：

    this.imgcache[path].onload = function() {
        this.canvas.drawImage(this.imgcache[path], coords[0], coords[1],
                              this.imgcache[path].width, this.imgcache[path].height);
    };

第一个将引用fooUI。但是，分配给onload属性的匿名函数将作为this.imagecache[path]引用的对象的方法调用，因此调用时该函数的this引用的对象

您可以使用闭包将其更改为具有合理名称的局部变量（我认为这不是一个好的选择），如：

---

代码中的另一点。如果您希望总是为映像调用onload，则必须在设置

.src

之前设置onload处理程序，因为如果映像来自浏览器缓存，则在设置

.srv

时onload可能会立即触发。为了完成此操作，值得一提的是bind（）函数的this关键字的值与作用域无关。它只受函数调用方式的控制（ES5绑定除外，但目前可以忽略）。@RobG因为JavaScript只有变量的函数作用域，我认为这是解释绑定如何工作的最简单方法，而不必深入语言的细节。这总是绑定到当前的执行上下文（函数或全局）. 可能只是在字里行间吹毛求疵，但如果你想保持简单，就不要提及与此相关的范围。

    this.imgcache[path].onload = function() {
        this.canvas.drawImage(this.imgcache[path], coords[0], coords[1],
                              this.imgcache[path].width, this.imgcache[path].height);
    };

    var uiObj = this;
    this.imgcache[path].onload = function() {
        uiObj.canvas.drawImage(uiObj.imgcache[path], coords[0], coords[1],
                               uiObj.imgcache[path].width, uiObj.imgcache[path].height);
    };