9
Прототипное программирование — это модель ООП которая не использует классы, 
а вместо этого сначала выполняет поведение класса и затем использует 
его повторно (эквивалент наследования в языках на базе классов), 
декорируя (или расширяя) существующие объекты прототипы. (Также 
называемое бесклассовое, прототипно-ориентированное, или экземплярно-
ориентированное программирование.)

Прошу помощи в объяснении данного текста.. Пытаюсь перейти паралельно на веб, сложно осваивается подход к Java Script после Java.

Что такое прототипное программирование ?

"это модель ООП которая не использует классы, а вместо этого сначала выполняет поведение класса" Чего ???

С пониманием объектно ориентированного программирования нету проблем.

10
  • 2
    откуда взят этот текст?
    – Grundy
    Commented 7 нояб. 2016 в 20:53
  • Возможно дубликат вопроса: Интерпретация слова прототип в статьях о js
    – Grundy
    Commented 7 нояб. 2016 в 20:57
  • Как я его понял, хотя может я его не понял ... ваши классы просто уже наследованы от базовых классов, а базовые классы наследованы от своих базовых классов и так пока не придём к одному/нескольким классам, которые ни от кого не наследуются. Дерево ... При этом мы можем всё равно наследоваться от других классов, которые будут выступать в роли примесей ... Добавляя что-либо в прототип текущего класса (HelloWorld.prototype.sayHi()), мы говорим не static (class HelloWorld {public function () {}}), ... Commented 7 нояб. 2016 в 21:08
  • ... а если просто присобачиваем в классу (HelloWorld.sayHi()), то говорим static (class HelloWorld {public static function () {}}). Как-то так, вроде ... бы. Commented 7 нояб. 2016 в 21:08
  • Grundy - developer.mozilla.org/ru/docs/Web/JavaScript/… Commented 7 нояб. 2016 в 21:21

3 ответа 3

10

В отличие от большинства других ОО-языков (Java, C#), объектная система в JavaScript основана на прототипах, а не классах. Классы, которые вы знаете по таким языкам, как Java, технически не существуют в JavaScript (JS).

Вся иерархия объектов строиться на цепочках - прототипах. Object.prototype - объект, от которого "наследуются" все остальные объекты. Он содержит такие методы, как toString() или valueOf().Прототип у него равен null. Замечу, что Object это просто функция-конструктор для создания объектов:

typeof Object // 'function'
Object.prototype // объект Object {}
Object.prototype.__proto__ // 'null'

prototype, который используется в примере, применим только к функциям, а для созданных объектов используется __proto__ (или [[Prototype]]).

Например, Array:

typeof Array // 'function'
Array.prototype.__proto__ === Object.prototype // true

var arr = [1,3]
arr.__proto__ // []
arr.__proto__ === Array.prototype // true

arr.__proto__.__proto__ // объект Object {}
arr.__proto__.__proto__ === Object.prototype // true

Все методы массивов (slice(), splice()) хранятся в объекте Array.prototype, а прототип этого объекта узакывает на Object.prototype.

Получается: arr -> Array.prototype -> Object.prototype -> null

Так же с другими встроенными функциями-конструкторами, например Function, Date, Number и т.д.


Сейчас все усложнилось ещё тем, что в новом стандарте (ES6) разработчики JS ввели class – удобный «синтаксический сахар» для задания конструктора вместе с прототипом. Насколько мне известно, его ввели в том числе специально для разработчиков, которые хотят писать на JS, но которых смущает, что в них нет классов :). На самом деле class в JS это обычная функция:

class Car {}
typeof Car // 'function'

Поэтому я до сих пор считаю, что понятие класс и классическое наследование немного некорректны в отношении JS.


Из плюсов прототипного наследования, наверно, это гибкость. Класс (например в Java) определяет все свойства для всех его экземпляров. Невозможно добавить свойства динамически во время выполнения. В тоже время в JS функция-конструктор определяет начальный набор свойств. Можно добавлять или удалять свойства динамически для отдельных объектов или сразу всем.

Возможно после использования интерфейсов/абстрактных классов в Java это покажется не плюсом, а минусом, но если этим уметь пользоваться, то потом этого не будет доставать в других языках.

// Функция конструктор
function Calculator () {}
Calculator.prototype.max = function (a, b) {
    return Math.max(a, b);
}

// Создадим два экземпляра (объекта)
var ins1 = new Calculator();
var ins2 = new Calculator();

// Протестируем метод max:
console.log(ins1.max(1, 5), ins2.max(1, 5)); // -> 5, 5


// Изменим метод прототипа, чтобы можно было выбирать макс. значение
// передавая сколько угодно параметров
Calculator.prototype.max = function () {
    var args = Array.prototype.slice.apply(arguments);
    return Math.max.apply(null, args);
}

// Протестируем опять:
console.log(ins1.max(1, 5), ins2.max(1, 5)); // -> 5, 5
console.log(ins1.max(9, -5, 13), ins2.max(9, -5, 13)); // -> 13, 13

Мы так же могли поменять реализацию только для одного объекта (сделать как нужно в рамках задачи).

Повторюсь, prototype, который используется в примере, применим только к функциям, а для созданных объектов используется __proto__ (или [[Prototype]]). Метод max будет находится в прототипе созданных объектов (ins1.__proto__.max), а прототипы у них указывают на один и тот же объект:

ins1.__proto__ === ins2.__proto__ // true

Интересный момент:

ins1.__proto__ // объект прототип
ins1.__proto__.constructor // function Calculator () {} - функция, с помощью который создаются объекты
ins1.__proto__.constructor.prototype // объект, который является прототипом
// Проверим?
ins1.__proto__.constructor.prototype === ins1.__proto__ // true

Другие достоинства, которые можно отметить: простота, мощность данного подхода, меньше избыточного кода, динамичность.

Если интересует момент, почему прототипное наследование в JS похоже на классическое (по синтаксису, например, использование оператора new), то это легко объяснить. Создатель JS, Brendan Eich, хотел чтобы JavaScript стал младшим братом Java и пытался его сделать максимально похожим синтаксически.

В общем я надеюсь, что вас ещё больше не запутал, просто нужно изучать изучать и ещё раз изучать :)

UPD.:

Пример использования "классов" из стандарта ES6.

class Auto {
    constructor(options) {
       this.name = options.name;
    }
    getName() {
        return this.name;
    }
}

const car = new Auto({ name: 'Lightning McQueen' });
car.getName(); // 'Lightning McQueen'

Все методы, объявленные в "классе" автоматически помещаются в прототип созданных объектов, а поля - в сам объект.

car.__proto__.getName // function getName() {return this.name;}
car.__proto__.name // undefined
car.__proto__.constructor // Auto

car.name // 'Lightning McQueen'

Ну и прототип протитипа Auto будет ссылкать на Object.prototype

car.__proto__.__proto__ === Object.prototype // true

Код "класса" Auto (без методов) в стандарте ES5 будет выглядеть следующим образом:

'use strict';    
function _classCallCheck(instance, Constructor) { 
    if (!(instance instanceof Constructor)) { 
        throw new TypeError("Cannot call a class as a function"); 
    } 
}

var Auto = function Auto(options) {
  _classCallCheck(this, Auto);

  this.name = options.name;
};

Обычная функция-конструктор с проверкой (за счет вызова _classCallCheck), чтобы нельзя вызывать Auto как функцию. Это все же класс :)

Auto() // Uncaught TypeError: Cannot call a class as a function(…)

Для создания методов используются Object.defineProperty, а посмотреть как работает транспайлер для методов (переводит код из ES6 в ES5 и не только) можно тут: https://babeljs.io/repl/ (Babel - один из самых популярных транспайлеров).


Рекомендую почитать:

  1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
  2. https://learn.javascript.ru/prototype
10
  • мне кажется запутал :)
    – Grundy
    Commented 8 нояб. 2016 в 7:46
  • " Невозможно добавить свойства динамически во время выполнения. В тоже время в JS функция-конструктор определяет начальный набор свойств. Можно добавлять или удалять свойства динамически для отдельных объектов или сразу всем." - Преимушеством JS прототипного наследование vs класического наследования является способность добавлять прототипы динамически и только? Commented 8 нояб. 2016 в 8:21
  • Добавил преимущества в ответ, которые считаю самыми основными (Рекомендую почитать отличный ответ о плюсах прототипного наследования в js: stackoverflow.com/a/16872315/6554441). А вообще, это разные подходы для построения иерархии объектов, как и везде, есть свои плюсы и минусы. Commented 8 нояб. 2016 в 8:59
  • Тем не менее - термин "класс" вполне применим к JS и мало отличается от обычного ООП. Если людям удобнее мыслить классами - зачем отказывать им в такой возможности, применимо к JS? Commented 8 нояб. 2016 в 10:14
  • @ГончаровАлександр термин "класс" вполне применим, согласен. Можно создавать с помощью конструкций class Foo extends Bar {} "классы", и все будет прекрасно работать. Но на момент изучения прототипов в js и как они устроены, лучше абстрагироваться от понятия "классы" и классического наследования, чтобы самому не путаться. Commented 8 нояб. 2016 в 10:35
3

Классическое ООП и JS прототипы на самом деле имеют мало различий:

  1. Любая функция в JS (кроме кратких - стрелочных функций ES6) является в терминологии ООП классом: к любой функции JS можно применять оператор new, что делает её конструктором. Это уже расширяет позицию ООП, в котором объекты конструируют не функции, а классы. Далее вместо термина функция - использую термин класс.

  2. Прототип - это класс-предок объекта, всё как в ООП - разница только в том, что прототип в JS - это уже сконструированный "готовый" объект, а в классическом ООП "прототип" - неотделим от самого класса-потомка: то есть не является ни объектом, ни чем-либо "физическим". Как работает наследование в JS, аналогичное обычному ООП наследованию - легко понять по такому примеру:

var classA = function(){this.x = function(){ this.a++; return this.a; } };

var classB = function(){ this.a = 2;};
classB.prototype = new classA();

console.log((new classB) instanceof classA);
console.log((new classB).x());

  1. Разве что прототипы могут больше, чем могут классы - например прототип(класс-предок говоря языком ООП) можно поменять/установить как для одного объекта, так и для класса в целом во время выполнения. Например можно типу-числу (Number) добавить поведение функции (вызов через скобки), см. скрещивание ужей с ежами в MDN. Где вы видели, чтоб в ООП можно было на лету подменить класс-предок?) При операции установки прототипа - происходит тоже самое, что произошло бы при подмене базового класса: а именно все свойства/методы объекта, не найденные у себя - ищутся уже в другом классе-предке, логика изменяется. Собственно эта возможность подмены/установки базового класса - и является главной фишкой прототипного программирования.
  2. Если нужно вызывать метод класса родителя, при том что он переопределён в текущем классе: до ES6 (в котором есть super) можно было делать так this.__proto__.someMethod.apply(this, [arg1, arg2]); . Длиннее, чем обычно в ООП - но суть остаётся той-же. Доступ к родительскому конструктору также имеется через this.__proto__.constructor.apply(this,[...]). Указываю на это - т.к. не очевидно поначалу - и прототипы кажутся совсем унылыми в плане ООП.
  3. ES6 и его синтаксис определения классов - это просто декорации старых добрых прототипов: то есть ничего принципиально нового в нём нет. Разве что ООП в JS стало удобнее. То есть ИМХО - Прототипное программирование это просто красное словцо. Ну да - нету protected, тоже сначала плевался, а потом понял что и не надо: инкапсуляция в JS очень красиво делается на замыканиях. Зато никто не мешает изобрести своё ООП если уж хочется(я бы не рекомендовал, но порой встечается в фреймворках), а также делать объекты мутанты - например массив может быть одновременно функцией через setPrototypeOf .

Как прототипы описаны в книжках и пособиях по JS дело другое: в ответе описана краткая помощь для разбора прототипов людям, знающим другие ООП-языки.

5
  • Надо переварить, всё же в Java всё это понятнее и логичнее выглядит как по моему.. Commented 7 нояб. 2016 в 22:44
  • @Maks.Burkov не берите в голову просто этот термин "прототипное программирование". Суть ответа в том, что оно мало отличается от ООП, является немного расширенным ООП но без инкапсуляции через private/protected . Кстати инкапсуляция в JS предполагается черз замыкания (вложенные функции) - что гораздо мощнее private/protected . Commented 7 нояб. 2016 в 22:49
  • @Maks.Burkov немного подправил ответ. Может быть что-то прояснит. Честно говоря меня тоже очень раздражал весь материал по прототипам JS после С++ , поэтому такой вот ответ - который искал сам когда-то Commented 8 нояб. 2016 в 0:07
  • @ГончаровАлександр, уже не любая, к стрелочным функциям нельзя применять оператор new
    – Grundy
    Commented 8 нояб. 2016 в 6:51
  • @Grundy спасибо, поправлю. Commented 8 нояб. 2016 в 8:52
0

По-моему прототипное программирование очень просто для понимания. У тебя есть совокупность объектов и одни из них наследуют свойства или методы других. Вот и всё, тут просто не появляется лишняя сущность "класс".

"это модель ООП которая не использует классы, а вместо этого сначала выполняет поведение класса" - а это неправильный перевод вот этого фрагмента:

Prototype-based programming is an OOP model that doesn't use classes, but rather it first accomplishes the behavior of any class and then reuses it (equivalent to inheritance in class-based languages) by decorating (or expanding upon) existing prototype objects.

Впрочем, тут и в оригинале заумно написано.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.