Сборка от 17 марта 2017 г

Хомяки с __proto__

важность: 5

Вы – руководитель команды, которая разрабатывает игру, хомяковую ферму. Один из программистов получил задание создать класс «хомяк» (англ –

"Hamster" ).

Объекты‑хомяки должны иметь массив food для хранения еды и метод found для добавления.

Ниже – его решение. При создании двух хомяков, если поел один – почему‑то сытым становится и второй тоже. В чём дело? Как поправить?

function Hamster() {}

Hamster.prototype.food = []; // пустой "живот"

Hamster.prototype.found = function(something) { this.food.push(something);
};

// Создаём двух хомяков и кормим первого var speedy = new Hamster();

var lazy = new Hamster();

speedy.found("яблоко"); speedy.found("орех");

alert( speedy.food.length ); // 2 alert( lazy.food.length ); // 2 (!??)

К решению

Наследование классов в JavaScript

Наследование на уровне объектов в JavaScript, как мы видели, реализуется через ссылку proto .

Теперь поговорим о наследовании на уровне классов, то есть когда объекты, создаваемые, к примеру, через new Admin , должны иметь все методы, которые есть у объектов, создаваемых через new User , и ещё какие‑то свои.

Наследование Array от Object

Для реализации наследования в наших классах мы будем использовать тот же подход, который принят внутри JavaScript. Взглянем на него ещё раз на примере Array , который наследует от Object :

• 
  Методы массивов Array хранятся в Array.prototype .
  
• 
  Array.prototype имеет прототипом Object.prototype .
  

Поэтому когда экземпляры класса Array хотят получить метод массива – они берут его из своего прототипа, например Array.prototype.slice . Если же нужен метод объекта, например, hasOwnProperty , то его в Array.prototype нет, и он берётся из Object.prototype .

Отличный способ «потрогать это руками» – запустить в консоли команду console.dir([1,2,3]) . Вывод в Chrome будет примерно таким:
Здесь отчётливо видно, что сами данные и length находятся в массиве, дальше в proto идут методы для массивов concat , то есть
Array.prototype , а далее – Object.prototype .