В этом руководстве вы узнаете о фабричных функциях JavaScript, которые возвращают объекты.
Фабричная функция — это функция, которая возвращает новый объект. Следующий пример создает объект человека с именем person1
:
let person1 = { firstName: 'John', lastName: 'Doe', getFullName() { return this.firstName + ' ' + this.lastName; }, }; console.log(p1.getFullName());
Выход:
John Doe
Объект person1
имеет два свойства: firstName
и lastName
и один метод getFullName()
, который возвращает полное имя.
Предположим, что вам нужно создать еще один подобный объект с именем person2
, вы можете продублировать код следующим образом:
let person2 = { firstName: 'Jane', lastName: 'Doe', getFullName() { return this.firstName + ' ' + this.lastName; }, }; console.log(jane.getFullName());
Выход:
Jane Doe
В этом примере объекты person1
и person2
имеют одинаковые свойства и методы.
Проблема в том, что чем больше объектов вы хотите создать, тем больше у вас будет повторяющегося кода.
Чтобы избежать повторного копирования одного и того же кода, вы можете определить функцию, которая создает объект person
:
function createPerson(firstName, lastName) { return { firstName: firstName, lastName: lastName, getFullName() { return firstName + ' ' + lastName; }, }; }
Когда функция создает и возвращает новый объект, она называется фабричной функцией. createPerson()
— это фабричная функция, поскольку она возвращает новый объект person
.
Ниже показано, как использовать фабричную функцию createPerson()
для создания двух объектов person1
и person2
:
function createPerson(firstName, lastName) { return { firstName: firstName, lastName: lastName, getFullName() { return firstName + ' ' + lastName; }, }; } let person1 = createPerson('John', 'Doe'); let person2 = createPerson('Jane', 'Doe'); console.log(person1.getFullName()); console.log(person2.getFullName());
Используя фабричную функцию, вы создадите любое количество объектов- person
без дублирования кода.
Когда вы создаете объект, движок JavaScript выделяет ему память. Если вы создаете много объектов- person
, движку JavaScript требуется много места в памяти для хранения этих объектов.
Однако у каждого объекта- person
есть копия одного и того же getFullName()
. Это неэффективное управление памятью.
Чтобы избежать дублированияgetFullName()
в каждом объекте, вы можете удалить метод getFullName()
из объекта person
:
function createPerson(firstName, lastName) { return { firstName: firstName, lastName: lastName } }
И переместите этот метод на другой объект:
var personActions = { getFullName() { return this.firstName + ' ' + this.lastName; }, };
И перед вызовом getFullName()
для объекта person
вы можете назначить метод объекта personActions
объекту person
следующим образом:
let person1 = createPerson('John', 'Doe'); let person2 = createPerson('Jane', 'Doe'); person1.getFullName = personActions.getFullName; person2.getFullName = personActions.getFullName; console.log(person1.getFullName()); console.log(person2.getFullName());
Этот подход не масштабируется, если у объекта много методов, потому что вам нужно вручную назначать их по отдельности. Вот почему в игру вступает метод Object.create()
.
Метод Object.create()
Метод Object.create()
создает новый объект, используя существующий объект в качестве прототипа нового объекта:
Object.create(proto, [propertiesObject])
Таким образом, вы можете использовать Object.create()
следующим образом:
var personActions = { getFullName() { return this.firstName + ' ' + this.lastName; }, }; function createPerson(firstName, lastName) { let person = Object.create(personActions); person.firstName = firstName; person.lastName = lastName; return person; }
Теперь вы можете создавать объекты person
и вызывать методы объекта personActions
:
let person1 = createPerson('John', 'Doe'); let person2 = createPerson('Jane', 'Doe'); console.log(person1.getFullName()); console.log(person2.getFullName());
Код работает отлично. Однако на практике вы редко будете использовать фабричные функции. Вместо этого часто используются классы или шаблоны конструктора/прототипа.
Заключение
- Фабричная функция — это функция, которая возвращает новый объект.
- Используйте
Object.create()
для создания нового объекта с помощью существующего объекта в качестве прототипа.