Функция конструктора.Невозможно перезаписать ссылку на глобальную переменную

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;

похоже ничего не делает.

Кроме того, если я изменю начальное значение картинки на что-либо, кроме «картинки» (которая является глобальной переменной), игра не запустится.

Контекст: 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. Поскольку вы используете синтаксис object-dot-method, например, player.load для вызова функций, все ссылки на this должны быть установлены так, как требуется / ожидается.

Однако, чтобы начать игру, вы звоните reset (например, с myDown). В reset объекты в player и target заменяются новыми экземплярами (обратите внимание на вызовы addRect). Метод load никогда не вызывается в новых экземплярах, и поэтому оба остаются с одинаковыми изображениями (глобальный pictures, как изначально установлено в Box). Поскольку оба используют один и тот же массив, pictures, они в конечном итоге окрашиваются одинаково.

Общий совет: я предлагаю избавиться от глобальных переменных, потому что их зависимости друг от друга не очевидны. Затем вам следует вызвать функцию reset для инициализации, а не удваивать реализацию на глобальном уровне. Попробуйте нарисовать статичное изображение, прежде чем вводить обработчики событий.

Answer 3

Использование this в отдельной функции не указывает на объект, которому принадлежит переменная.