Прототипная цепочка

Как JS ищет методы и свойства через цепочку прототипов.

Язык примеров:

Шаг 1 из 2

Что такое прототип

Скрытая ссылка [[Prototype]]

Каждый объект в JavaScript имеет скрытое свойство [[Prototype]] — ссылку на другой объект. Через неё JS ищет методы и свойства, которых нет в самом объекте.

const animal = {
  speak() {
    return this.name + " издаёт звук";
  }
};

const dog = {
  name: "Рекс",
};

// Устанавливаем прототип dog → animal
Object.setPrototypeOf(dog, animal);

dog.speak(); // "Рекс издаёт звук"
// Метода speak нет в dog → JS ищет в прототипе → находит в animal

Как читать прототип

Object.getPrototypeOf(dog) === animal; // true
dog.hasOwnProperty("name");  // true  — своё свойство
dog.hasOwnProperty("speak"); // false — взято из прототипа

Все объекты наследуют от Object.prototype

const obj = {};
obj.toString();        // "[object Object]" — из Object.prototype
obj.hasOwnProperty;    // функция — из Object.prototype

Object.getPrototypeOf(obj) === Object.prototype; // true
Object.getPrototypeOf(Object.prototype) === null; // конец цепочки

JavaScript

// Цепочка прототипов в действии
const grandparent = { level: "grandparent", greet() { return "Привет!"; } };
const parent = { level: "parent" };
const child  = { level: "child" };

Object.setPrototypeOf(parent, grandparent);
Object.setPrototypeOf(child, parent);

child.level;  // "child"    — своё
child.greet(); // "Привет!" — из grandparent через цепочку

// for...in проходит по всей цепочке!
for (const key in child) {
  if (child.hasOwnProperty(key)) {
    console.log("своё:", key);
  } else {
    console.log("из прото:", key);
  }
}

Функции высшего порядка Классы ES6

StudyCode

Скрытая ссылка [[Prototype]]

const animal = {
  speak() {
    return this.name + " издаёт звук";
  }
};

const dog = {
  name: "Рекс",
};

// Устанавливаем прототип dog → animal
Object.setPrototypeOf(dog, animal);

dog.speak(); // "Рекс издаёт звук"
// Метода speak нет в dog → JS ищет в прототипе → находит в animal

Все объекты наследуют от Object.prototype

const obj = {};
obj.toString();        // "[object Object]" — из Object.prototype
obj.hasOwnProperty;    // функция — из Object.prototype

Object.getPrototypeOf(obj) === Object.prototype; // true
Object.getPrototypeOf(Object.prototype) === null; // конец цепочки

// Цепочка прототипов в действии const grandparent = { level: "grandparent", greet() { return "Привет!"; } }; const parent = { level: "parent" }; const child = { level: "child" }; Object.setPrototypeOf(parent, grandparent); Object.setPrototypeOf(child, parent); child.level; // "child" — своё child.greet(); // "Привет!" — из grandparent через цепочку // for...in проходит по всей цепочке! for (const key in child) { if (child.hasOwnProperty(key)) { console.log("своё:", key); } else { console.log("из прото:", key); } }