JavaScript не нуждается в классах

Часто встречается мнение, что наследование прототипов JavaScript слишком сложное и что ему нужны классы, чтобы быть более удобным для пользователя. Этот пост утверждает, что это мнение неверно.

    var jane = {
        name: "Jane",
        describe: function() {
            return "Person called "+this.name;
        }
    };
    
    console.log(jane.describe()); // Person called Jane

Джейн является объектом, который был создан с помощью
литерала объекта . Имя и описание являются
свойствами . Описание это свойство, значение которого является функцией. Такие функционально-значимые свойства называются
методами . Литерал объекта выглядит как словарь (карта), но это реальный объект. В большинстве языков на основе классов вам нужен класс для его создания. Отсюда и
шаблон синглтона .

Основная идея наследования прототипов невероятно проста , намного проще, чем классы. То, что делает JavaScript настолько сложным, заключается в том, что эта основная идея затеняется при попытке сделать создание экземпляров (данного типа) похожим на Java. Основная идея наследования прототипа такова: объект может указывать на другой объект и, таким образом, делать его своим прототипом . Если свойство не найдено в объекте, поиск продолжается в прототипе (и, если он есть, его прототип и т. Д.). Это позволяет моделировать Джейн и Тарзан как «экземпляры» PersonProto:

    var PersonProto = {
        describe: function () {
            return "Person called "+this.name;
        },
    };
    var jane = {
        __proto__: PersonProto,
        name: "Jane",
    };
    var tarzan = {
        __proto__: PersonProto,
        name: "Tarzan",
    };
    
    console.log(jane.describe()); // Person called Jane

Джейн и Тарзан используют один и тот же прототип PersonProto, который предоставляет метод description () им обоим. Обратите внимание, насколько PersonProto похож на класс.

Конструкторы. Способ создания фабрики для экземпляров PersonProto по умолчанию — через функцию конструктора (short: constructor). Это нормальная функция, которая вызывается через оператор new для создания экземпляра. В следующем коде Person является конструктором. Person.prototype — это тот же объект, что и PersonProto, он становится общим прототипом всех экземпляров Person. Очевидно, конструкторы соответствуют классам в других языках.

    // Constructor: set up the instance
    function Person(name) {
        this.name = name;
    }

    // Prototype: shared by all instances
    Person.prototype.describe = function () {
        return "Person called "+this.name;
    };

    var jane = new Person("Jane");
    console.log(jane instanceof Person); // true

    console.log(jane.describe()); // Person called Jane

Расширяющиеся конструкторы. Вещи становятся неприятными только тогда, когда вы переходите к расширению конструктора, к созданию суб-конструктора через наследование. Давайте создадим Employee как вспомогательный конструктор Person: Сотрудник — это человек, но у него дополнительно есть заголовок, и его метод description () работает по-другому, поскольку он также упоминает заголовок.

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

    var jane = new Employee("Jane", "CTO");
    console.log(jane instanceof Person); // true
    console.log(jane instanceof Employee); // true

    console.log(jane.describe()); // Person called Jane (CTO)

Нет сомнений, что это громоздко (подробности объясняются
здесь ). В результате для JavaScript были написаны многочисленные
библиотеки для обработки наследования. Но JavaScript нуждается во встроенном решении. В следующих разделах представлены три кандидата на ECMAScript.next.

Решение по наследованию 1: незначительные языковые дополнения

Если вы добавите четыре второстепенные конструкции в JavaScript (как
предложено для ECMAScript.next), тогда все станет намного проще:

1. Оператор наследования <| (читается как «расширен»):

       var Super = function () { ... }
       var Sub   = Super <| function () { ... }
   

   Конструктор Sub расширяет конструктор Super.

2. Супер собственность доступ:

       super.describe()
   

3. Оператор расширения . = Добавляет свойства к объекту вместо его замены:

       var colorPoint = { color: "green" };
       colorPoint .= { x: 33, y: 7 }
   

   После этого colorPoint имеет значение

       { color: "green", x: 33, y: 7 }
   

4. Укороченный синтаксис метода для литералов объекта:

       {
           method(arg1, arg2) {
               ...
           }
       }
   

   это аббревиатура для

       {
           method: function (arg1, arg2) {
               ...
           }
       }
   

С этими конструкциями предыдущий код выглядит следующим образом:

    function Person(name) {
        this.name = name;
    }
    Person.prototype .= {
        describe() {
            return "Person called "+this.name;
        }
    };
    
    var Employee = Person <| function (name, title) {
        super.constructor(name);
        this.title = title;
    }
    Employee.prototype .= {
        describe() {
            return super.describe() + " (" + this.title + ")";
        }
    };

Это уже вполне пригодно для использования. Остановка здесь будет в порядке, но мы можем сделать немного лучше.

Решение по наследованию 2: образцы объектов

Экземпляр является заводом для экземпляров. В языках на основе классов примерами являются классы. В текущем JavaScript примерами являются функции (конструкторы, как описано выше). Но в принципе вы также можете использовать прототип (объект) в качестве образца. Это основная идея
объектных образцов . Они получают выгоду от языковых конструкций, которые были представлены в предыдущем разделе:

    var Person = {
        constructor(name) {
            this.name = name;
        },
        describe() {
            return "Person called "+this.name;
        }
    };
    var Employee = Person <| {
        constructor(name, title) {
            super.constructor(name);
            this.title = title;
        },
        describe() {
            return super.describe() + " (" + this.title + ")";
        }
    };
    
    var jane = new Employee("Jane", "CTO");
    console.log(jane instanceof Employee); // true

    Constructor1 <| Constructor2
    Prototype1   <| Prototype2
    Constructor  <| Prototype
    Prototype    <| Constructor

    class Person {
        constructor(name) {
            this.name = name;
        },
        describe() {
            return "Person called "+this.name;
        }
    }
    class Employee extends Person {
        constructor(name, title) {
            super.constructor(name);
            this.title = title;
        },
        describe() {
            return super.describe() + " (" + this.title + ")";
        }
    }