Question

我使用这个构造函数为游戏制作对象。现在，每次都会覆盖一系列图像，这样所有对象在屏幕上看起来都是一样的。

这里是有问题的对象：

function Box() {
    this.ready = false;
    this.pics = pictures;//[];
    this.state = 0;
    this.x = 0;
    this.y = 0;
    this.w = 1;
    this.h = 1;
    this.fill = "#444";
    this.load = function(array){
        var foo = [];
        pictures = [];
        for(var i = 0; i < array.length; i++){
            pictures.push(loadPic(array[i]));
            foo.push(loadPic(array[i]));
        }
        //this.pics = pictures;
        this.pics = foo;
    }
}

该行

this.pics = foo;

似乎什么都不做。

此外，如果我将图片的初始值更改为除了＆＃34;图片＆＃34; （这是一个全局变量）游戏无法启动。

Contex：https://github.com/kaninepete/Javascript-Games/blob/images/MVP.js

Answer 1

试试这个：

var $this = this;
this.load = function(array){
    //...
    $this.pics = foo;
}

您必须知道函数内的this与构造函数中的this不同。实际上load()函数中的一个指向浏览器window对象。

相反，我们定义了一个名为$this的变量（大多数人喜欢模式中的that）并从函数内部引用它，使其成为一个闭包。

Answer 2

最初，您要创建player和target个对象，并通过调用load加载他们的照片。因为您使用了对象点方法语法，例如player.load来调用函数，所以对this的所有引用都应该按需要/期望设置。

然而，要开始游戏，您正在调用reset（例如来自myDown）。在reset内，player和target中的对象将替换为新实例（请注意对addRect的调用）。永远不会在新实例上调用方法load，因此两者都保留相同的图片（最初在pictures中设置的全局Box）。因为两者共享相同的数组pictures，所以它们最终被绘制相同。

一般建议：我建议摆脱全局变量，因为它们之间的依赖关系并不明显。然后，您应该调用reset函数进行初始化，而不是将全局级别的实现加倍。在引入事件处理程序之前，请先尝试绘制静态图片。

Answer 3

在单独的函数中使用this并不指向变量所属的对象。

构造函数。无法覆盖对全局变量的引用

3 个答案: