Революция в JavaScript. Буквально

Сегодня 22 апреля юбилейного 2017 года, день рождения человека, без которого не состоялись бы события столетней давности. А значит, есть повод поговорить о революционной истории. Но причём тут Хабр? — Оказалось, всё в этом мире может иметь самую неожиданную связь.

Как мы знаем, JavaScript может рассматриваться как объектно-ориентированный язык в том смысле, что «всё сводится к объектам» (на самом деле, прототипу объекта). С другой стороны, в широком философском вопросе, мы тоже то и дело имеем дело с объектами и прототипами. Например, при рассмотрении объекта Революции и его прототипа, описанного в «Капитале». Так давайте просто поговорим о тех событиях современным языком!

Со всей революционной прямотой, сразу козыри на стол!
Данная статья является по сути кратким пояснением к механизму наследования в JavaScript, то есть одной из сторон ООП. Передовые пролетарии-разработчики не найдут в ней абсолютно ничего нового. Однако надеюсь, материал может послужить запоминающейся, образной памяткой для широкого круга интересующихся разработкой на JS. Кроме того, возможно, кто-то подтянет свои знания по отечественной истории

Создадим два объекта:

var stalin = {    gulag: true,    mustache: true,    hero: 1 }  var lenin = {    baldHead: true,    armand: false,    criticalImperialism: true } 

Укажем, что один объект является наследником другого через свойство __proto__ (такая форма записи доступна во всех браузерах, кроме IE10-, и включена в ES2015). Один наследник, а другой — прототип. Проверяем свойства объекта-наследника, там появилось __proto__:

stalin.__proto__ = lenin; console.log(stalin);

Если свойство не обнаруживается непосредственно в объекте, оно ищется в родительском объекте (прототипе). Попробуем:

console.log(stalin.baldHead);  //  true

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

stalin.baldHead = false; console.log(lenin.baldHead);  //  true - свойство в прототипе не поменялось

Кстати, а что является прототипом прототипа?

В JS объект, кроме одного случая (об этом ниже) наследует от Object.__proto__ (посмотрите в консоли). В том числе, стандартные методы, доступные по умолчанию: такие, например, как Object.toString(), Object.valueOf() и так далее.

А как нам перечислить свойства непосредственно объекта, без свойств его родителя, чтобы не выполнять лишние операции? – Для этого есть hasOwnProperty:

for (var key in stalin) {    if (stalin.hasOwnProperty(key)) console.log(key + ": " + stalin[key]) }

Кстати, если объект уже имеет своё свойство, то после присвоения прототипа оно не будет затёрто значением из прототипа, а останется как было:

var dzerjinskiy = {    mustache: true,    baldHead: false } dzerjinskiy.__proto__ = lenin; console.log(dzerjinskiy.baldHead);  //  false - при присвоении прототипа осталось тем же

Наконец, может понадобиться простой объект-пустышка без свойств, который нужен только для записи значений. Тогда нам не придётся при перечислении его свойств проверять hasOwnProperty:

var zyuganov = Object.create(null); zyuganov.experience = 25; console.log(zyuganov.toString);  //  undefined

При проверке выясняется, что у пустого объекта нет даже стандартных методов, таких, как toString(). Кстати, выше был использован метод Object.create(prototype[, {}]) — метод, позволяющий создать объект с обязательным указанием прототипа (в т.ч. null) и свойствами (не обязательно).

F.prototype и new

Можно создать конструктор, чтобы проще было создавать экземпляры, родителем которых является единственный объект:

var marks = {    marxism: true,    engels: "friend",    beard: 80 }  function Marksist(name) {    this._name = name;    this.__proto__ = marks; }  var kamenev = new Marksist("kamenev"); console.log(kamenev);

Видим, что тов. Каменев тоже имеет бороду

Однако что насчёт Революции? Можно добавить в прототип новое значение и метод, тогда и потомок может использовать этот метод:

marks.revolution = "future"; marks.deal = function() {return this.revolution};  //  this ссылается на объект marks

Новое значение появилось в потомке:

console.log(kamenev.revolution);  //  "future"

Мы добавляем свойство или метод в прототип, и оно появляется у потомков без необходимости их переопределения. Сила прототипного наследования!

Естественно, значение в потомке можно модифицировать, остальных потомков прототипа это не коснётся:

kamenev.revolution = "now"; console.log(kamenev.deal());  //  "now"

Как видно, у объекта изначально не было метода, однако после добавления метода в прототип, мы можем вызывать его, мало того, с модифицированными в потомке значениями.

Для поддержки во всех браузерах, в т.ч. старых, есть другой способ:

function Marksist(name) {    this._name = name;			 } Marksist.prototype = marks; var kamenev = new Marksist("Каменев"); console.log(kamenev);   //  выведет объект с одним своим свойством и объектом marks в __proto__

Prototype имеет смысл только в конструкторах (пишутся в JS с большой буквы), он по сути выполняет лишь одно действие, а именно: указывает, куда ссылаться свойству __proto__ при инициализации функции-конструктора.

Если мы уже после создания первого объекта хотим создать второй, указав ему другой прототип, прототип первого объекта не изменится:

Marksist.prototype = {}; var chicherin = new Marksist("Чичерин"); console.log(chicherin.marxism);  //  undefined, в свойстве __proto__ будет стандартный прототип Object console.log(kamenev.marxism);  //  по-прежнему true, в свойстве __proto__ будет объект marks

Видно, что у нового объекта с пустым прототипом нет унаследованных свойств, как у первого объекта. Но всё можно переиграть на лету:

Marksist.prototype = marks; var zinovev = new Marksist("Зиновьев");		 console.log(zinovev.marksizm);   //   true console.log(zinovev.deal());   //   future

Следует отметить, что изменение прототипов считается весьма затратной операцией, поэтому играть с прототипами “на лету” не рекомендуется!

В прототипе мы также можем задавать методы, которые будут использовать все потомки:

var marks = {    marxism: true,    engels: "friend",    beard: 80,    shout: function(){       alert("Я есть товарищ " + this._name + "!")    } } function Marksist(name) {    this._name = name;			 } Marksist.prototype = marks; var dzerjinskiy = new Marksist("Дзержинский"); dzerjinskiy.shout();  //  Я есть товарищ Дзержинский! 

Здесь this – это объект, у которого вызывается функция из прототипа, в данном случае Дзержинский.

Правильно Феликс Эдмундович нас предупреждает: в JavaScript всегда надо быть бдительным насчёт того, куда в данный момент указывает ключевое слово this

Можно проверить, а является ли объект наследником конструктора, с помощью оператора instanceof:

var zemlyachka = function(tov) {    var res = false;				    if (tov instanceof Marksist) res = true;    return res; } console.log(zemlyachka(zinovev));   //  true

Приводим оппортуниста, который будет иметь на практике все те же свойства и методы, что и обычный марксист:

var opportunist = {    name: "Преображенский",    marxism: true,    engels: "friend",    beard: 80,    shout: function(){       alert("Я есть товарищ " + this.name + "!")    } };		 opportunist.shout();

Можем даже сообщить ему то же единственное собственное свойство, а остальные определить в его прототипе, то есть сохранить ровно ту же структуру, что и у предыдущих объектов:

var plehanov = {    marxism: true,    engels: "friend",    beard: 80,    shout: function(){       alert("Я есть товарищ " + this._name + "!")    } } function Socialist (name){    this._name = name; } Socialist.prototype = plehanov; var opportunist = new Socialist("Попутчик"); console.log(opportunist);   // структура объекта и прототипа идентичная таковой объекта var zinovev = new Marksist, имена свойств те же 

Однако на проверке он завалится:

console.log(zemlyachka(opportunist));  //  false

Розалия Самойловна видит объект насквозь. Есть и другой подход к проверке объектов —

Duck Typing

Если это выглядит как утка, плавает как утка и крякает как утка, то это, возможно, и есть утка.

Если субъект объект ведёт себя так, как нам нужно, то мы считаем его коммунистом тем, кем нужно считать, несмотря на его происхождение

Однако и проверенные коммунисты иногда могут ошибаться. Оператор instanceof сравнивает только прототипы объекта и конструктора, поэтому возможны коллизии наподобие этой:

var troczkiy = new Marksist("Троцкий"); Marksist.prototype = {}; console.log(troczkiy instanceof Marksist);  //  опа, 1940-й год подкрался незаметно!

Ну и конечно помним, что всё в JS является объектом (а если точнее, в цепочке прототипов все объекты, кроме специальных пустых, приходят к Object.prototype), поэтому проверка оба раза выдаст true:

var john_reed = [10]; console.log(john_reed instanceof Array);  //  true console.log(john_reed instanceof Object);  //  true

Свойство constructor

У функций-конструкторов (да и вообще всех функций) есть свойство prototype, в котором записан constructor: он возвращает ссылку на функцию, создавшую прототип экземпляра. Его можно легко потерять в дальнейших преобразованиях, т.к. JS не обязан сохранять эту ссылку. Допустим, мы решили всё-таки выяснить политические корни Льва Давыдовича:

var marks = {    marxism: true,    engels: "friend",    beard: 80 }  function Marksist(name) {    this._name = name; }  Marksist.prototype = marks; var troczkiy = new Marksist("Троцкий"); var Congress = troczkiy.constructor; var retrospective = new Congress("My life"); console.log(retrospective);  //  чёрти что, конструктор делает явно не то, чего мы от него ожидаем!

Очевидно, мы не смогли вызвать ту же функцию-конструктор, которая создала бы нам новый объект, идентичный первому (хотя constructor, по идее, должен был бы указывать на неё!). Чтобы получить нужный результат, просто сохраним свойство constructor в прототипе Marksist:

var marks = {    marxism: true,    engels: "friend",    beard: 80 }  function Marksist(name) {    this._name = name;  }  Marksist.prototype = marks; Marksist.prototype.constructor = Marksist; var troczkiy = new Marksist("Троцкий"); var Congress = troczkiy.constructor; var retrospective = new Congress("My life"); console.log(retrospective);  //  вот теперь всё как нужно!

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

Глядя на эти преобразования, может прийти мысль переопределять свойства и методы встроенных прототипов JavaScript. Говоря революционным языком, перейти на глобальный, земшарный уровень

Нас ничто не остановит от того, чтобы, например, поменять метод Object.prototype:

Object.prototype.toString = function(){    alert("К стене!") }

Или даже не такой экстремистский пример:

Array.prototype.manifest= function(){    return "Призрак бродит по Европе - призрак коммунизма"; }

Такой стиль изменения классов (здесь точнее было бы сказать прототипов) называется monkey patching.

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

И во-вторых, переопределение в процессе выполнения программы может приводить к неочевидным результатам:

var pss = {    name: "Полное собрание сочинений",    author: "Ленин",    length: 20 }  var Books = function(){}; Books.prototype = pss; var firstEdition = new Books; console.log(firstEdition.length);  //  20 var extendLenin = function(year){    if (!year) var year = new Date().getFullYear();    if (year > 1925 && year < 1932) pss.length = 30;    if (year > 1941 && year < 1966) pss.length = 35;    if (year > 1966) pss.length = 55; } extendLenin(); var fourthEdition = new Books; console.log(fourthEdition.length);  //  ??

Поведение свойств объектов, наследующих от прототипа (т.н. «экземпляров класса») может быть не таким, как мы предполагаем.

Функциональное наследование

В JavaScript, кроме прототипной парадигмы наследования, используется также функциональная. На примере одного из героев Революции посмотрим, как она реализуется.

Создадим конструктор, который:
а) Принимает параметры
б) Обладает публичными методами, которые предполагаются для использования извне конструктора и его производных
в) Обладает приватными методами, которые, как предполагаются, будут использоваться только внутри конструктора и его производных

Перед нами типичный коммунист:

var Kommunist = function(principles) {    if (!principles) principles = {};    this._start = 1902;    if (principles && principles.start) this._start = principles.start;    // публичный метод, предполагается к использованию извне    this.response = function() {       alert("Наше дело правое!")    }        // приватный метод, по соглашению доступен внутри конструктора и его потомков    this._experience = function() {       return (this._start);    }         this.principles = (Object.keys(principles).length > 0 ? principles : {fidelity: 100});      this._getPrinciples = function() {       return this.principles    } } 

Приватные методы принято писать, начиная с нижнего подчёркивания.

Итак, у нас есть конструктор с набором методов, готовый принимать и обрабатывать аргументы. Создаём экземпляр класса:

function Voroshilov(principles) {      Kommunist.apply(this, arguments);           //  расширяем метод конструктора    var parentExperience = this._experience;    this._experience = function() {       return ("Стаж в ВКП(б) с " + parentExperience.apply(this, arguments));          }        // публичные методы, обращаемся к ним извне    // геттеры    this.getPrinciples = function() {       var p = this._getPrinciples();          var char = {          fidelity: p.fidelity,          persistence: p.persistence || "достаточная!"       }       console.log("Верность: " + char.fidelity + ", стойкость: " + char.persistence)    }        this.getExperience = function() {   	       console.log(this._experience());       alert("Опыт ого-го!");    }    // сеттер    this.setExperience = function() {       this._experience = function() {          return ("Стаж в ВКП(б) со Второго съезда");         }    } } var ke = {fidelity: 101, persistence: 100, start: 1903} var voroshilov = new Voroshilov(ke); 

Обратите внимание: конструктор вызывается относительно this, чтобы записать в него все свои методы, и с массивом arguments, в котором содержатся все аргументы, заданные при вызове (объект ke).

Дальше мы можем наблюдать, как работают геттер и сеттер, а также другие публичные методы:

voroshilov.getExperience();  //  получили значение voroshilov.setExperience();  //  заменили метод предустановленным в экземпляре класса voroshilov.getExperience();  //  получили новое значение voroshilov.getPrinciples();  //  получили результат выполнения публичного метода с заданными параметрами 

Для разнообразия можно вызвать конструктор без параметров.

Классовая сущность

Наконец, с выходом ES6 (ES2015) у нас появилась возможность использовать инструкцию class непосредственно в JavaScript. По сути, в устройстве прототипного наследования ничего не изменилось, однако теперь JS поддерживает синтаксический сахар, который будет более привычен многим программистам, пришедшим из других языков.

class Marksist {    constructor(name) {       this._name = name    }    enemy() {       return "capitalism"    }				    static revolution(){       return "Революция нужна"    } } 

У классов JS есть три вида методов:
— constructor (выполняется при инициализации экземпляра класса);
— static (статичные методы, доступные при вызове класса, но недоступные в экземплярах);
— обычные методы.

Теперь запомним в константе (ES6 допускает и такой тип переменных) очень важную дату, а далее определим меньшевика, который является наследником марксиста:

const cleavage = 1903;  class Menshevik extends Marksist {    constructor(name) {       super();       this._name = name;					    }    static revolution() {       var r = super.revolution();       return r + ", но потом";    }    ["che" + cleavage]() {       alert("Пароль верный!")    }    hurt() {       alert("Ленин был прав")    } }  let chkheidze = new Menshevik("Чхеидзе"); 

Здесь есть два новшества:
— super() в первом случае инициализирует конструктор базового класса, во втором вызывает метод, к которому мы в потомке добавляем новое поведение;
— вычисляемые имена методов ([«che» + cleavage]), теперь нам не обязательно сразу знать имя метода.

Статический метод доступен при вызове класса, но не при вызове экземпляра:

console.log(Menshevik.revolution());   //   работает console.log(chkheidze.revolution());   //   is not a function, в экземпляре её нет 

Результат выполнения следующего кода уже понятен:

chkheidze.hurt();   //   вызов метода класса console.log(chkheidze.enemy());   //   вызов метода базового класса			 chkheidze.che1903();   //   вызов метода с вычисляемым именем 

Выше были показаны самые основные особенности наследования через классы (class) в JavaScript. Сознательный пролетарий при должной революционной настойчивости найдёт в сети немало статей, более полно освещающий вопрос нововведений в ES6.
ссылка на оригинал статьи https://habrahabr.ru/post/324640/