№22 Конструкторы в JavaScript

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

Конструктор представляет собой обычную функцию.

var Module = function () {

};

или

function Module() {

}

Эти две записи тождественны. Я все-таки предпочитаю использовать первый вариант, так как он позволяет объявить функцию с достаточно сложным названием. Например, App.Package1.Module2.

Для создания нового объекта конструктор вызывается через оператор new.

var instance = new Module();

Оператор new меняет значение переменной this внутри конструктора. В отличие от его обычного значения, this будет новым объектом. Тело конструктора обычно инициализирует поля объекта. По завершению конструктор вернет этот новый объект, если точка выхода не будет явно переопределена через оператор return.

Некоторый смущающий момент заключается в том, что если конструктор будет вызван без оператора new, то this уже не будет новым объектом, а будет ссылаться на window!

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

var Module = function () {

var me = {};

return me;

};

№23 Прототипы в JavaScript.

Когда вы определяете функцию в JavaScript она получает несколько предопределённых свойств. Одним из таких свойств является мнимый прототип. В данном уроке мы рассмотрим, что такое прототип, зачем и когда его нужно использовать.

Что такое прототип?

Свойство прототип - изначально пустой объект. Вы можете добавлять к нему члены, как и для любого другого объекта:

01 var myObject = function(name){

02 this.name = name;

03 return this;

04 };

06 console.log(typeof myObject.prototype); // Объект

08 myObject.prototype.getName = function(){

09 return this.name;

10 };

В выше приведенном примере мы создали функцию. Но если вызвать myObject(), то она просто вернет объект window, так как определена в глобальном контексте. Следовательно, this возвращает глобальный объект, так как еще не было инициализации (подробнее далее в тексте урока).1 console.log(myObject() === window); // true

Зачем использовать прототип?

Например, при разработке игры нужно несколько (возможно, сотню) объектов отображать на экране. Каждый объект имеет свои свойства, такие как координаты x и y, width,height, и другие.

Можно сделать так:01 var GameObject1 = {

02 x: Math.floor((Math.random() * myCanvasWidth) + 1),

03 y: Math.floor((Math.random() * myCanvasHeight) + 1),

04 width: 10,

05 height: 10,

06 draw: function(){

07 myCanvasContext.fillRect(this.x, this.y, this.width, this.height);

08 }

09 ...

10 };

12 var GameObject2 = {

13 x: Math.floor((Math.random() * myCanvasWidth) + 1),

14 y: Math.floor((Math.random() * myCanvasHeight) + 1),

15 width: 10,

16 height: 10,

17 draw: function(){

18 myCanvasContext.fillRect(this.x, this.y, this.width, this.height);

19 }

21 };

И еще 98 раз.

Все эти объекты создаются и хранятся в памяти - с отдельными реализациями нужных методов. Такой подход очень далек от идеала - игра будет перегружать брауззер. что может в конечном итоге привести к зависанию.

Но можно сохранить эффективность работы приложения. Нужно все лишь создать сотню разных объектов с единственным объектом prototype.

Как использовать прототип?

Для того, чтобы увеличить производительность приложения, мы можем (пере)определить свойство прототипа GameObject. Каждый экземпляр GameObject будет ссылаться на методы в GameObject.prototype так, как будто они принадлежат ему.01 // Определяем конструктор GameObject

02 var GameObject = function(width, height) {

03 this.x = Math.floor((Math.random() * myCanvasWidth) + 1);

04 this.y = Math.floor((Math.random() * myCanvasHeight) + 1);

05 this.width = width;

06 this.height = height;

07 return this;

08 };

09

10 // (Пере)определяем прототип GameObject

11 GameObject.prototype = {

12 x: 0,

13 y: 0,

14 width: 5,

15 width: 5,

16 draw: function() {

17 myCanvasContext.fillRect(this.x, this.y, this.width, this.height);

18 }

19 };

Теперь создаем 100 реализаций GameObject.1 var x = 100,

2 arrayOfGameObjects = [];

3

4 do {

5 arrayOfGameObjects.push(new GameObject(10, 10));

6 } while(x--);

У нас есть массив со ста объектами GameObject, которые используют общий прототип и определение метода draw, что существенно экономит память приложения.

Вызов метода draw осуществляется очень просто:1 var GameLoop = function() {

2 for(gameObject in arrayOfGameObjects) {

3 gameObject.draw();

4 }

5 };