构造函数函数.可以't覆盖对全局变量的引用

Constructor function. Can't overwrite reference to global variable

本文关键字：覆盖 全局变量 引用 函数 可以 构造函数      更新时间：2023-09-26

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

这是有问题的对象：

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;

似乎什么都没做。

此外，如果我将图片的初始值更改为"图片"（这是一个全局变量）以外的任何值，游戏就不会开始。

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

试试这个：

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

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

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

最初，您要创建player和target对象，并通过调用load加载它们的图片。因为您使用的是对象点方法语法，例如player.load来调用函数，所以对this的所有引用都应该根据需要/预期进行设置。

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

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

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

相关文章：