Прототипное наследование - это наследование свойств и методов обьекта родителя путем присваивание его к скрытому свойству "Prototype" экземпляра обьекта;
Обьекты в JavaScript содержат скрытое свойство "Prototype", к каторому можно присвоить другой обьект;
При вызове свойства обьекта оно сначала ищется у него самого, а потом ищется у его родителей через цепочку прототипов, до того пока свойство не будет найдено или прототип не будет равен null, тогда вернется undefined.
Пример A:
<pre class="shiki github-dark shaku"><code> const a = { name: "Dima" } const b = {} b.__proto__ = a; console.log(b.name); // Dima</code></pre>
Переопределение свойства родительского обьекта приводит к создании копии этого свойства в текущем обьекте.
Пример B:
<pre class="shiki github-dark shaku"><code> // ... Пример A b.name = "Roma"; console.log(b.name); // Roma console.log(b.__proto__.name); // Dima</code></pre>
При вызове родительского метода this, внутри него, указывает на текущий обьект: поиск свойства у this происходит через цепочку прототипов.
Пример C:
<pre class="shiki github-dark shaku"><code> // ... Пример B a.sayHi = function() { return "Привет " + this.name + "!"; } console.log(b.sayHi()); // Привет Roma! console.log(b.__proto__.sayHi()); // Привет Dima!</code></pre>
Цепочка прототипов может быть длиннее:
<pre class="shiki github-dark shaku"><code> const a = { name: "Dima" } const b = { age: 23, __proto__: a } const c = { hairColor: "Brown", __proto__: b } // name взят из цепочки прототипов console.log(c.name); // Dima console.log(b.age); // 23 (из обьекта b)</code></pre>
Операция записи не использует прототип - Прототип используется только для чтения свойств. Операции записи/удаления работают напрямую с объектом.
В приведённом ниже примере мы присваиваем rabbit собственный метод walk:
<pre class="shiki github-dark shaku"><code> let animal = { eats: true, walk() { /* этот метод не будет использоваться в rabbit */ } }; let rabbit = { __proto__: animal }; rabbit.walk = function() { alert("Кролик! Прыгает!"); }; rabbit.walk(); // Кролик! Прыгает!</code></pre>
Свойства-аксессоры – исключение, так как запись в него обрабатывается функцией-сеттером. То есть это фактически вызов функции.
По этой причине admin.fullName работает корректно в приведённом ниже коде:
<pre class="shiki github-dark shaku"><code> let user = { name: "Dima", surname: "Chekashov", set fullName(value) { [this.name, this.surname] = value.split(" "); }, get fullName() { return `${this.name} ${this.surname}`; } }; let admin = { __proto__: user, isAdmin: true }; alert(admin.fullName); // Dima Chekashov (*) // срабатывает сеттер! admin.fullName = "Roma Chekashov"; // (**) alert(admin.name); // Roma alert(admin.surname); // Chekashov</code></pre>
Здесь в строке (*) свойство admin.fullName имеет геттер в прототипе user, поэтому вызывается он. В строке (**) свойство также имеет сеттер в прототипе, который и будет вызван.
Цикл for..in проходит не только по собственным, но и по унаследованным свойствам объекта.
Например:
<pre class="shiki github-dark shaku"><code> let animal = { eats: true }; let rabbit = { jumps: true, __proto__: animal }; // Object.keys возвращает только собственные ключи alert(Object.keys(rabbit)); // jumps // for..in проходит и по своим, и по унаследованным ключам for(let prop in rabbit) alert(prop); // jumps, затем eats</code></pre>
Если унаследованные свойства нам не нужны, то мы можем отфильтровать их при помощи встроенного метода obj.hasOwnProperty(key): он возвращает true, если у obj есть собственное, не унаследованное, свойство с именем key.
<h4>Итого</h4>
<ul>
<li>В JavaScript все объекты имеют скрытое свойство [[Prototype]], которое является либо другим объектом, либо null.</li>
<li>Мы можем использовать obj.proto для доступа к нему.</li>
<li>Объект, на который ссылается [[Prototype]], называется «прототипом».</li>
<li>Если мы хотим прочитать свойство obj или вызвать метод, которого не существует у obj, тогда JavaScript попытается найти его в прототипе.</li>
<li>Операции записи/удаления работают непосредственно с объектом, они не используют прототип (если это обычное свойство, а не сеттер).</li>
<li>Если мы вызываем obj.method(), а метод при этом взят из прототипа, то this всё равно ссылается на obj. Таким образом, методы всегда работают с текущим объектом, даже если они наследуются.</li>
<li>Цикл for..in перебирает как свои, так и унаследованные свойства. Остальные методы получения ключей/значений работают только с собственными свойствами объекта.</li>
</ul>

Что такое прототипное наследование и как оно работает?

Microsoft

It is hard to explain something clearly. I'd suggest you take a top-down approach for this kind of abstract concept. for example. 1. generally what it…