Шаблоны создания объектов в JavaScript 

В этой статье мы обсудим некоторые шаблоны создания объектов в JavaScript.

Для создания объектов в JS существуют различные шаблоны, которым можно следовать.

Эти шаблоны:

1. Factory
2. Constructor
3. Prototype
4. Dynamic prototype

Шаблон Factory

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

Рассмотрим этот пример, где мы хотим создать объекты для компьютера, которые будут содержать свои объемы памяти (ОЗУ и жесткий диск).

Чтобы создать фабрику, мы пишем код ниже:

// Шаблон "Фабрика"
var computerFactory = function(ram, hardDisk) {

 // создаем новый временный объект
 var computer = {};

 // создаем свойства
 computer.ram = ram;
 computer.hardDisk = hardDisk;

 // создаем методы
 computer.AvailableMemory = function() {
   console.log('Hard-disk : ' + this.hardDisk);
   console.log('Ram : ' + this.ram);
 };

 return computer;
};

Теперь мы создаем объект, вызывая фабрику, например так:

// Создание нового объекта (ов) для компьютерного класса с использованием computerFactory
var computer1 = computerFactory(4,512);
var computer2 = computerFactory(16,1024);

// Доступ к методам класса с использованием объектов
computer1.AvailableMemory();
computer2.AvailableMemory();

Выход:

Шаблон Constructor

С помощью шаблона конструктора мы не возвращаем экземпляр из функции - вместо этого мы используем оператор new вместе с именем функции.

Конструктор для последнего примера будет создан следующим образом:

var computer = function(ram, hardDisk) {
 // Создать свойства класса
 this.ram = ram;
 this.hardDisk = hardDisk;

 // Создать методы класса
 this.AvailableMemory = function() {
   console.log('Hard-disk : ' + this.hardDisk);
   console.log('Ram : ' + this.ram);
 };
};

Примечание: мы не возвращаем объект из конструктора компьютера.

// Создание нового объекта (ов) для класса с использованием шаблона конструктора
var computer1 = new computer(4,512);
var computer2 = new computer(16,1024);

// Доступ к свойствам объекта
computer1.AvailableMemory();
computer2.AvailableMemory();

Выход:

Шаблон Prototype

В JavaScript почти каждый объект имеет прототип, который содержит свойства, связанные с объектом.

Вы можете прочитать больше о прототипах в MDN Web Docs .

В шаблоне прототипа мы создаем пустой объект и присваиваем свойства (и функции) его прототипу с некоторыми значениями по умолчанию. Затем мы создаем пустой объект и назначаем фактические значения для свойств.

Этот шаблон можно представить так:

var computer = function() {};
computer.prototype.ram = NaN;
computer.prototype.hardDisk = NaN;
computer.prototype.AvailableMemory = function() {
 console.log('Hard-disk : ' + this.hardDisk);
 console.log('Ram : ' + this.ram);
};

// Создание нового объекта (ов) для класса
// используя шаблон прототипа
var computer1 = new computer(); 

// Назначаем фактическое значение для свойства объекта
computer1.ram = 4; 
computer1.hardDisk = 512;

var computer2 = new computer();
computer2.ram = 16;
computer2.hardDisk = 1024;

// Доступ к методам класса с использованием объектов
computer1.AvailableMemory();
computer2.AvailableMemory();

Выход:

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

var computer1 = new computer(); 
// Создан объект со значениями по умолчанию

console.log('ram' in computer1); // returns true
console.log(computer1.hasOwnProperty('ram')); // returns false

Это связано с тем, что оператор in сначала ищет свойство в корне объекта, а затем поиск продолжается в прототипе объекта, в то время как hasOwnProperty ограничивается корневым элементом объекта, в котором выполняется поиск свойства.

Шаблон Dynamic Prototype

Динамический шаблон прототипа представляет собой гибрид шаблона конструктора и шаблона прототипа.

Мы создаем функции-члены в пространстве прототипов объекта, если функция-член не существует:

var computerDynamicProto = function(ram, hardDisk) {
 this.ram = ram;
 this.hardDisk = hardDisk;

 if (typeof this.AvailableMemory !== 'function') {
   computerDynamicProto.prototype.AvailableMemory = function() {
     console.log('\nHarddisk : ' + this.hardDisk);
     console.log('Ram : ' + this.ram);
   };
 }

};

var computer1 = new computerDynamicProto(4,512);
computer1.AvailableMemory();

Выход:

Перевод статьи: Object Creation Patterns in JavaScript
Источник: medium.com