Создание класса javascript с объектом, содержащим функции

Question

Я пытаюсь создать javascript «класс», и он работает несколько хорошо, но Engine.tile.draw работает не так, как предполагалось. Кажется, я не могу заставить его работать внутри Engine.start. Невозможно создать объект и добавить внутри него функцию, как я? Как вы, ребята, это сделаете? Любая помощь приветствуется. :)

var EngineClass = (function() { 
    var Engine = function() { 
     this.canvas = document.getElementById('game'); 
     this.handle = this.canvas.getContext('2d'); 
    }; 

    Engine.prototype.start = function (mapData) { 
     this.tile.draw(mapData); 
    }; 

    Engine.prototype.tile = { 
     draw: function (x, y, tile) { 
     this.handle.fillText(tile, x * 16, y * 16); 
     }; 
    } 

    return Engine; 
})(); 

var Engine = new EngineClass(); 

Answer 1

Это действительно не работает использовать суб -bjects, как вы здесь:

Engine.prototype.tile = { 
    draw: function (x, y, tile) { 
    this.handle.fillText(tile, x * 16, y * 16); 
    }; 
} 

Вопрос заключается в том, что при вызове Engine.tile.draw(), то this указатель внутри метода draw() будет установите для объекта tile, который не является вашим кодом (ваш код предполагает, что this указывает на пример Engine, который не является тем, что происходит).

Если вам действительно нужен подобъект подобным образом, тогда вам нужно будет инициализировать этот под-объект в конструкторе Engine, чтобы каждый объект tile был настроен однозначно, и тогда вам нужно будет добавить его указатель на двигатель tile данных экземпляра, так что, когда вызывается Engine.tile.draw(), вы можете получить соответствующий экземпляр Engine из указателя this, который указывает на объект tile. Но это все беспорядок и, вероятно, и ненужный, и трудный способ делать что-то.

Возможно, вы либо сделаете tile своим собственным объектом с его собственными данными экземпляра, либо поместите метод draw на объект Engine и просто передадите ему некоторые аргументы, которые помогут ему выполнить свою работу.

Answer 2

Замечания выше, говорящие, что вы не должны пытаться принуждать классы к JavaScript, который является прототипом языка, верны.

Технически причина, по которой это не работает, заключается в том, что всякий раз, когда вы вызываете функцию с использованием точечной нотации (например, something.method()), функция вызывается с this, связанной с левой стороной точки. Таким образом, в этом случае, когда вы говорите this.tile.draw(mapData), функция tile.draw вызывается с , являющимся объектом tile, а не объектом Engine, как и следовало ожидать.

Существует несколько способов преодолеть это, но лучшим советом является перевести свое мышление на систему прототипирования JavaScript, вместо того чтобы пытаться навязать на нем свой образцовый образ мышления.

Answer 3

Потому что внутри draw функция будет ссылаться на объект Engine.prototype.tile, а не то, что вы ожидали.

Изменить

Engine.prototype.tile = { 
    draw: function (x, y, tile) { 
    this.handle.fillText(tile, x * 16, y * 16); 
    }; 
} 

в

Engine.prototype.tile = function() { 
    var self = this; 
    return { 
    draw: function (x, y, tile) { 
     self.handle.fillText(tile, x * 16, y * 16); 
    }; 
    }; 
} 

И называют это нравится:

Engine.prototype.start = function (mapData) { 
    this.tile().draw(mapData); 
};