Шаблоны проектирования JavaScript: прототип

Development, Java | Amber | Комментировать запись

Любой разработчик JavaScript либо встречал ключевое слово prototype, запутавшись в прототипном наследовании, либо реализовывал прототипы в своем коде. Шаблон проектирования Prototype основан на прототипическом наследовании JavaScript. Модель прототипа используется в основном для создания объектов в ситуациях, требующих высокой производительности.

Созданные объекты являются передаваемыми (поверхностными) клонами исходного объекта. Одним из вариантов использования шаблона прототипа является выполнение обширной операции с базой данных для создания объекта, используемого в других частях приложения. Если другой процесс должен использовать этот объект, гораздо выгоднее клонировать его вместо того, чтобы выполнять эту операцию с базой данных.

https://upload.wikimedia.org/wikipedia/commons/1/14/Prototype_UML.svg

Эта диаграмма описывает, как используется прототип интерфейса для клонирования конкретных реализаций.

Чтобы клонировать объект, необходим конструктор для создания экземпляра первого объекта. Затем с помощью ключевых слов prototype к структуре объекта привязываются переменные и методы. Давайте рассмотрим базовый пример:

var TeslaModelS = function() {
    this.numWheels    = 4;
    this.manufacturer = 'Tesla';
    this.make         = 'Model S';
}

TeslaModelS.prototype.go = function() {
    // Rotate wheels
}

TeslaModelS.prototype.stop = function() {
    // Apply brake pads
}

Конструктор позволяет создать один объект TeslaModelS. При создании нового объекта TeslaModelS он сохранит состояния, инициализированные в конструкторе. Кроме того, мы можем легко поддерживать функции go и stop, поскольку мы объявили их с помощью прототипа. Ниже вы найдете еще один способ расширить функцию:

var TeslaModelS = function() {
    this.numWheels    = 4;
    this.manufacturer = 'Tesla';
    this.make         = 'Model S';
}

TeslaModelS.prototype = {
    go: function() {
    // Rotate wheels
    },
    stop: function() {
    // Apply brake pads
    }
}

Выявляющий прототипный шаблон

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

Читайте также: Шаблоны проектирования JavaScript: модуль

Поскольку мы возвращаем объект, мы добавим к объекту-прототипу префикс функции. Вышеприведенный пример можно расширить. К примеру, мы можем выбрать, что мы хотим показать в текущем прототипе, чтобы сохранить их уровни доступа:

var TeslaModelS = function() {
    this.numWheels    = 4;
    this.manufacturer = 'Tesla';
    this.make         = 'Model S';
}

TeslaModelS.prototype = function() {

    var go = function() {
    // Rotate wheels
    };

    var stop = function() {
    // Apply brake pads
    };

    return {
    pressBrakePedal: stop,
    pressGasPedal: go
    }

}();

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