Облегченные API наследования JavaScript

Как выглядит API, который помогает нам с наследованием, но в противном случае изменяет JavaScript как можно меньше? Мы используем имя «фабрика объектов» для конструкции, которая позволяет нам создавать объекты. Вот необходимые части API:

• Единая конструкция для создания объекта. Наличие единой конструкции означает меньше беспорядка. И наоборот, определение функции конструктора в традиционном JavaScript — это всегда двухэтапный процесс: сначала функция, затем прототип.
• Вызовите объектную фабрику через нового оператора. В результате код, использующий API, выглядит знакомым и, следовательно, его легче понять.
• Определите, что является общим для объектов, а что нет. Методы обычно попадают в первую категорию, свойства данных обычно попадают во вторую. Эти определения — это то, что представляет собой создание объекта.
• Наследование. Сложно с традиционным JavaScript, поэтому мы хотим, чтобы API помог нам.
• Добавление методов к существующим объектным фабрикам. Добавление методов к свойству prototype функции конструктора является обычной практикой в ​​JavaScript и должно поддерживаться API.
• Легкий вызов переопределенных методов. Многословно в традиционном JavaScript.
• Поддержка экземпляров тестов. Должен быть способ проверить, является ли объект экземпляром данной фабрики объектов.

В следующих разделах мы сначала рассмотрим, как осуществляется наследование в традиционном JavaScript, а затем перейдем к четырем API, которые соответствуют вышеупомянутым требованиям: ECMAScript 5, YUI, Prototype.js и Simple Inheritance Джона Резига. Существуют более мощные API-интерфейсы, но они слишком сильно отличаются от собственно JavaScript для целей этого поста, где мы хотим, чтобы все было легко.

Традиционный JavaScript

Когда дело доходит до создания экземпляров в JavaScript, нужно различать специфичные для экземпляра вещи (свойства данных) и вещи, которые являются общими для всех экземпляров (методов). Учитывая функцию-
конструктор C, которая создает объекты, C.prototype — это то место, куда идут общие вещи, а сама функция C добавляет специфичные для экземпляра свойства. Это четкое разделение ответственности.

    function Person(name) {
        this.name = name;
    }
    Person.prototype.describe = function() {
        return "Person called "+this.name;
    }
    function Worker(name, title) {
        Person.call(this, name);
        this.title = title;
    }
    Worker.prototype = Object.create(Person.prototype);
    Worker.prototype.describe = function() {
        return Person.prototype.describe.call(this)+" ("+this.title+")";
    }

Взаимодействие:

    > var john = new Person("John");
    > john.describe()               
    Person called John
    > var jane = new Worker("Jane", "CTO");
    > jane.describe()
    Person called Jane (CTO)
    > jane instanceof Worker
    true
    > jane instanceof Person
    true

Работник является вспомогательным конструктором Person. Для его создания нам необходимо решить следующие задачи:

• Worker.prototype должен быть объектом, прототип которого — Person.prototype. Мы решаем эту проблему с помощью объекта ECMAScript 5 Object.create () (который будет объяснен в следующем разделе). Часто используемым более традиционным решением является назначение Worker.prototype = new Person (), но затем Worker.prototype имеет переменные экземпляра Person, которые являются избыточными.
• Экземпляр Worker должен иметь переменные экземпляра Person, в дополнение к его собственным. Мы решаем это, позволяя конструктору Worker вызывать конструктор Person, но без оператора new. Таким образом, новый экземпляр не создается, но Person по-прежнему добавляет свои переменные экземпляра по мере необходимости.
• Вызов супер-методов. Для этого нам нужно напрямую обратиться к супер-методу (который является частью супер-прототипа).
• Включение instanceof: object instanceof ConstructorFunction работает, проверяя, находится ли ConstructorFunction.prototype в цепочке прототипов объекта. Таким образом, вместо jane instanceof Person мы могли бы написать Person.prototype.isPrototypeOf (jane). isPrototypeOf () является методом ECMAScript 5.

Обратите внимание, что у нас нет общего способа ссылки на супер-конструктор, мы всегда упоминаем Person напрямую.

ECMAScript 5

Чтобы понять подход ECMAScript, нам сначала нужно посмотреть, как ECMAScript обрабатывает свойства.

Характеристики недвижимости. Свойство в ECMAScript может иметь следующие характеристики:

• Есть три вида свойств:
  
  • Имя свойство данных является нормальным свойством в объекте , где он связывает имя со значением.
  • Имя аксессор свойство является свойством, доступ к которым осуществляются через геттер и способ инкубационного. Значение свойства может быть вычислено и, следовательно, нигде не сохранено.
  • Внутреннее свойство управляется двигателем JavaScript и не могут быть доступны на всех через JavaScript, или только косвенно. Например, прототип объекта недоступен для записи во многих механизмах JavaScript и доступен только через Object.getPrototypeOf ().
• Атрибуты свойства: есть три логических флага, которые определяют, как работает свойство.
  
  • доступный для записи: если true, значение свойства может быть изменено
  • enumerable: если false, свойство скрыто в некоторых контекстах
  • настраиваемый: если true, свойство может быть удалено, его атрибуты могут быть изменены, и оно может быть изменено со свойства данных на свойство доступа (или наоборот)
• Собственные и унаследованные: Собственные свойства непосредственно содержатся в этом, унаследованные свойства доступны через цепочку прототипов.

    Object.defineProperty(obj, "prop", { writable: false, value: "abc" });

    Object.create(prototype, [propertyDescriptors]);

    var PersonProto = {
        describe: function() {
            return "Person called "+this.name;
        }
    };
    function createPerson(name, self) {
        self = self || Object.create(PersonProto);
        self.name = name;
        return self;
    }
    // The sub-prototype extends the super-prototype
    var WorkerProto = Object.create(PersonProto, {
        describe: {
            value: function() {
                return PersonProto.describe.call(this)+" ("+this.title+")";
            }
        }
    });
    function createWorker(name, title) {
        var self = createPerson(name, Object.create(WorkerProto));
        self.title = title;
        return self;
    }

    > var john = createPerson("John");
    > john.describe()
    Person called John
    > var jane = createWorker("Jane", "CTO");
    > jane.describe()
    Person called Jane (CTO)
    > WorkerProto.isPrototypeOf(jane)
    true
    > PersonProto.isPrototypeOf(jane)
    true

    jane instanceof WorkerProto

    YUI().use("oop", function(Y) {
        function Person(name) {
            this.name = name;
        }
        Person.prototype.describe = function() {
            return "Person called "+this.name;
        }
        function Worker(name, title) {
            Worker.superclass.constructor.call(this, name);
            this.title = title;
        }
        Y.extend(Worker, Person); // before adding methods
        Worker.prototype.describe = function() {
            return Worker.superclass.describe.call(this)+" ("+this.title+")";
        }

        var john = new Person("John");
        console.log(john.describe());
        var jane = new Worker("Jane", "CTO");
        console.log(jane.describe());
        console.log(jane instanceof Worker);
        console.log(jane instanceof Person);
    });

    Person called John
    Person called Jane (CTO)
    true
    true