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

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

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

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

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

10
  • 2
    откуда взят этот текст?
    – Grundy
    7 ноя 2016 в 20:53
  • Возможно дубликат вопроса: Интерпретация слова прототип в статьях о js
    – Grundy
    7 ноя 2016 в 20:57
  • Как я его понял, хотя может я его не понял ... ваши классы просто уже наследованы от базовых классов, а базовые классы наследованы от своих базовых классов и так пока не придём к одному/нескольким классам, которые ни от кого не наследуются. Дерево ... При этом мы можем всё равно наследоваться от других классов, которые будут выступать в роли примесей ... Добавляя что-либо в прототип текущего класса (HelloWorld.prototype.sayHi()), мы говорим не static (class HelloWorld {public function () {}}), ... 7 ноя 2016 в 21:08
  • ... а если просто присобачиваем в классу (HelloWorld.sayHi()), то говорим static (class HelloWorld {public static function () {}}). Как-то так, вроде ... бы. 7 ноя 2016 в 21:08
  • Grundy - developer.mozilla.org/ru/docs/Web/JavaScript/… 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
    8 ноя 2016 в 7:46
  • " Невозможно добавить свойства динамически во время выполнения. В тоже время в JS функция-конструктор определяет начальный набор свойств. Можно добавлять или удалять свойства динамически для отдельных объектов или сразу всем." - Преимушеством JS прототипного наследование vs класического наследования является способность добавлять прототипы динамически и только? 8 ноя 2016 в 8:21
  • Добавил преимущества в ответ, которые считаю самыми основными (Рекомендую почитать отличный ответ о плюсах прототипного наследования в js: stackoverflow.com/a/16872315/6554441). А вообще, это разные подходы для построения иерархии объектов, как и везде, есть свои плюсы и минусы. 8 ноя 2016 в 8:59
  • Тем не менее - термин "класс" вполне применим к JS и мало отличается от обычного ООП. Если людям удобнее мыслить классами - зачем отказывать им в такой возможности, применимо к JS? 8 ноя 2016 в 10:14
  • @ГончаровАлександр термин "класс" вполне применим, согласен. Можно создавать с помощью конструкций class Foo extends Bar {} "классы", и все будет прекрасно работать. Но на момент изучения прототипов в js и как они устроены, лучше абстрагироваться от понятия "классы" и классического наследования, чтобы самому не путаться. 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 всё это понятнее и логичнее выглядит как по моему.. 7 ноя 2016 в 22:44
  • @Maks.Burkov не берите в голову просто этот термин "прототипное программирование". Суть ответа в том, что оно мало отличается от ООП, является немного расширенным ООП но без инкапсуляции через private/protected . Кстати инкапсуляция в JS предполагается черз замыкания (вложенные функции) - что гораздо мощнее private/protected . 7 ноя 2016 в 22:49
  • @Maks.Burkov немного подправил ответ. Может быть что-то прояснит. Честно говоря меня тоже очень раздражал весь материал по прототипам JS после С++ , поэтому такой вот ответ - который искал сам когда-то 8 ноя 2016 в 0:07
  • @ГончаровАлександр, уже не любая, к стрелочным функциям нельзя применять оператор new
    – Grundy
    8 ноя 2016 в 6:51
  • @Grundy спасибо, поправлю. 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.

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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