Шаблон конструктора/прототипа в JavaScript

В этом руководстве вы узнаете, как использовать шаблон конструктора/прототипа JavaScript для определения пользовательского типа в ES5.

Комбинация шаблонов конструктора и прототипа — наиболее распространенный способ определения пользовательских типов в ES5. В этом шаблоне:

• Шаблон конструктора определяет свойства объекта.
• Шаблон прототипа определяет методы объекта.

При использовании этого шаблона все объекты пользовательского типа совместно используют методы, определенные в прототипе. Также у каждого объекта есть свои свойства.

Этот шаблон конструктора/прототипа объединяет лучшие части шаблонов конструктора и прототипа.

Пример

Предположим, вы хотите определить пользовательский тип с именем Person, который имеет:

• Два свойства firstName и lastName
• Один метод getFullName()

Во-первых, используйте функцию конструктора для инициализации свойств:

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}

Движок JavaScript определяет функцию Person, обозначенную кружком, и анонимный объект, обозначенный квадратом.

Функция Person имеет свойство prototype, которое ссылается на анонимный объект. Анонимный объект имеет свойство constructor, которое ссылается на функцию Person :

Во-вторых, определите метод getFullName() в объекте- prototype функции Person :

Person.prototype.getFullName = function() {
    return this.firstName + ' ' + this.lastName;
};

JavaScript определяет метод getFullName() для объекта Person.prototype следующим образом:

В-третьих, создайте несколько экземпляров типа Person :

let p1 = new Person("John", "Doe"); 
let p2 = new Person("Jane", "Doe"); 
console.log(p1.getFullName()); 
console.log(p2.getFullName());

Выход:

'John Doe' 
'Jane Doe'

Javascript создает два объекта p1 и p2. Эти объекты ссылаются на объект Person.prototype через связь [[Prototype]] :

Каждый объект имеет свои собственные свойства firstName и lastName. Однако они используют один и тот же getFullName().

Когда вы вызываете метод getFullName() для объекта p1 или p2, механизм JavaScript ищет метод для этих объектов. Поскольку движок JavaScript не находит там метод, он следует привязке к прототипу и ищет метод в объекте Person.prototype.

Поскольку объект Person.prototype имеет метод getFullName(), JavaScript прекращает поиск и выполняет этот метод.

Рассмотрим все это вместе:

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}
Person.prototype.getFullName = function() {
    return this.firstName + ' ' + this.lastName;
};
let p1 = new Person('John', 'Doe');
let p2 = new Person('Jane', 'Doe');
console.log(p1.getFullName());
console.log(p2.getFullName());

Классы в ES6

ES6 вводит ключевое слово class, которое упрощает использование шаблона конструктора/прототипа. Например, в следующем примере ключевое слово class используется для определения точно такого же типа Person :

class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    getFullName() {
        return this.firstName + " " + this.lastName;
    }
}
let p1 = new Person('John', 'Doe');
let p2 = new Person('Jane', 'Doe');
console.log(p1.getFullName());
console.log(p2.getFullName());

В этом синтаксисе class перемещает инициализацию свойства в метод constructor. Он также упаковывает метод getFullName() в то же место, что и функция- constructor.

Синтаксис класса выглядит чище и менее многословен. Тем не менее, это синтаксический сахар по сравнению с шаблоном конструктор/прототип с некоторыми улучшениями.

Для получения дополнительной информации о классах ознакомьтесь с учебным пособием по классам JavaScript.

Заключение

• Используйте конструктор/прототип JavaScript для определения пользовательского типа в ES5.
• Инициализируйте свойства объекта в функции-конструкторе и определите методы и свойства, которые могут быть общими для всех экземпляров в объекте-прототипе.