Learning JavaScript Design Patterns / Шаблоны проектирования JavaScript: Шаблон Конструктор (Constructor)

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

An_zh 09.07.14 в 15:08

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

Agnis 18.09.15 в 00:48

Создание объектов

An_zh 09.07.14 в 17:40

В JavaScript есть три основных способа создания объектов:

An_zh 09.07.14 в 17:41

1
//Каждый из следующих вариантов создаст новый пустой объект:
2

3
var newObject = {};
4

5
// или
6
var newObject = Object.create( null );
7

8
// или
9
var newObject = new Object();

An_zh 09.07.14 в 17:45

Где конструктор "Object", в последнем примере создает объект обертку с определенным значением, если значение не передается, то создается и возвращается пустой объект.

An_zh 10.07.14 в 11:00

Существует четыре способа присвоения значения свойствам объекта:

An_zh 10.07.14 в 11:25

01
// стандарт ECMAScript 3
02

03
// 1. Применение оператора точки
04

05
// Установка значения свойств
06
newObject.someKey = "Hello World";
07

08
// Считывание значения свойств
09
var key = newObject.someKey;
10

11

12

13
// 2. Оператор квадратные скобки
14

15
// Установка значения свойств
16
newObject["someKey"] = "Hello World";
17

18
// Считывание значения свойств
19
var key = newObject["someKey"];
20

21

22

23
// Стандарт ECMAScript 5
24
// Для получения подробной информации: http://kangax.github.com/es5-compat-table/
25

26
// 3. Object.defineProperty
27

28
// Установка значения свойств
29
Object.defineProperty( newObject, "someKey", {
30
value: "for more control of the property's behavior",
31
writable: true,
32
enumerable: true,
33
configurable: true
34
});
35

36
// ели этот метод кажется трудночитаемым то его можно сократить
37
// следующим образом:
38

39
var defineProp = function ( obj, key, value ){
40
config.value = value;
41
Object.defineProperty( obj, key, config );
42
};
43

44
// Для дальнейшей работы, мы создаем новый пустой объект класса «person»
45
var person = Object.create( null );
46

47
// Задаем свойства объекта
48
defineProp( person, "car", "Delorean" );
49
defineProp( person, "dateOfBirth", "1981" );
50
defineProp( person, "hasBeard", false );
51

52

53
// 4. Object.defineProperties
54

55
// Устанавливаем значения свойств
56
Object.defineProperties( newObject, {
57

58
"someKey": {
59
value: "Hello World",
60
writable: true
61
},
62

63
"anotherKey": {
64
value: "Foo bar",
65
writable: false
66
}
67

68
});
69

70
// Чтобы получить значение свойств 3 и 4 можно применить любой из
71
// методов 1 или 2

An_zh 10.07.14 в 11:25

Как мы узнаем чуть позже, эти же методы можно использовать при наследовании:

An_zh 10.07.14 в 11:27

01
// Применение:
02

03
// Создаем объект «водитель гоночной машины», который является наследником класса «person»
04
var driver = Object.create( person );
05

06
// Задаем несколько свойств для водителя
07
defineProp(driver, "topSpeed", "100mph");
08

09
// Считываем значение унаследованного свойства (1981)
10
console.log( driver.dateOfBirth );
11

12
// Считываем значение свойства которое мы задали (100mph)
13
console.log( driver.topSpeed );

An_zh 10.07.14 в 11:33

Простые Конструкторы

Agnis 18.09.15 в 00:49

Как мы узнали ранее, JavaScript не поддерживает классы, но для работы с объектами есть специальная функция конструктор. Если при вызове функции предварять ее название ключевым словом «new», то для JavaScript это будет обозначать, что функция является конструктором, и она служит для инициализации нового объекта значениями определенным в этой функции.

An_zh 10.07.14 в 18:19

Внутри конструктора ключевое слово «this» указывает на вновь созданный объект. Еще раз рассмотрим создание объекта, основной конструктор может выглядеть так:

An_zh 10.07.14 в 18:43

01
function Car( model, year, miles ) {
02

03
this.model = model;
04
this.year = year;
05
this.miles = miles;
06

07
this.toString = function () {
08
return this.model + " has done " + this.miles + " miles";
09
};
10
}
11

12
// Usage:
13

14
// Мы можем создать новый объект класса «Car»
15
var civic = new Car( "Honda Civic", 2009, 20000 );
16
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
17

18
// и открыть консоль для вывода
19
// метод toString() вызывается
20
// для этого объекта
21
console.log( civic.toString() );
22
console.log( mondeo.toString() );

An_zh 11.07.14 в 19:36

Выше приведен пример простого шаблона конструктор, который имеет несколько недостатков. Первый заключается в том что, усложняется процесс наследования, второй – такие функции как toString() переопределяются каждый раз при создании нового объекта конструктором Car. Это не очень оптимально, так как в идеале функция должна быть определена один раз и доступна всем экземплярами класса Car.

An_zh 11.07.14 в 19:39

К счастью обойти эти ограничения достаточно просто, существует ряд альтернатив как для стандарта ES3, так и для ES5.

An_zh 11.07.14 в 19:44

Свойство конструктора Prototype

An_zh 12.07.14 в 10:55

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

An_zh 12.07.14 в 10:54

01
function Car( model, year, miles ) {
02

03
this.model = model;
04
this.year = year;
05
this.miles = miles;
06

07
}
08

09

10
// Отметьте, что мы используем Object.prototype.newMethod, а не
11
// Object.prototype, чтобы избежать переопределение базового объекта
12
Car.prototype.toString = function () {
13
return this.model + " has done " + this.miles + " miles";
14
};
15

16
// Использование:
17

18
var civic = new Car( "Honda Civic", 2009, 20000 );
19
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
20

21
console.log( civic.toString() );
22
console.log( mondeo.toString() );

Agnis 18.09.15 в 00:43

В вышеописанном примере функция toString() обвялена один раз и доступна всем объектам класса Car

An_zh 12.07.14 в 11:02