JS原型机制如何实现继承？

很多开发者在学习 JavaScript 时经常会被 prototype__proto__ 这两个极其相似的词搞晕。最让人头疼的痛点在于：明明在构造函数里写了属性，为什么实例能访问到原型上的方法？为什么继承之后修改子类属性有时会影响到父类？话说回来，

其实理解 JS 继承的主要就在于掌握“原型链”的查找机制。

一、 主要基础：理解 prototype

1. 什么是原型？

在 JS 中，函数天生拥有一个 prototype 属性。可以将共用的属性和方法挂载在原型上，这样在创建多个实例时不需要在每个实例中重复创建相同的方法。从而大幅减少内存开销，提高性能。

Array.prototype.abc = function{
console.log
}
const arr =
arr.abc // 输出: abc

关键

• 显式属性： 定义在构造函数内部的属性，每个实例独有一份。
• 隐式属性： 定义在构造函数 prototype 上的属性，所有实例共享。

2. new 关键字背后的真相

很多同学对 new 的执行过程感到模糊。当你执行 new Constructor 时V8 引擎做了四件事：

1. 创建空对象凭空创建一个新的 this 对象。
2. 执行构造函数将对象传递给构造函数，执行内部代码。
3. 建立原型链接这是最关键的一步！怎么说呢，执行 this.__proto__ = Constructor.prototype。
4. 返回对象最终返回这个已经绑定好原型的 this 对象。

二、 对象原型的双轨制

为了理清继承关系。必须区分这两个概念：

• __proto__ 每个实例对象都拥有此属性，它像一根线一样指向创建它的构造函数的 prototype。其实，
• prototype 只有函数才拥有此属性。它是为了给未来的实例提供“公共资源库”。

function Car{
this.color = color;// 每个车颜色不同
}
Car.prototype.name = 'su7';按理说，// 所有车都叫 su7
const car = new Car;console.log，// { color: 'blue' } -> 直接查找到自身属性
console.log;// { name: 'su7' } -> 通过隐式原型找到公共属性

三、 原型链继承的实现

1. 实现简单的父子继承

痛点场景的观点是。如果我想让 Child 类继承 Far 类定义的姓氏，该怎么做？

function Far { this.lastName = '张' }
function Child { this.age = 10 }
// ：让子类的显式原型 指向 父类的实例对象/原型的表现形式形式之一的方式是 new Far
Child.prototype = new Far;const p = new Child;console.log，// 输出: 张 

2. 原型链查找原则

当 V8 在访问一个对象的属性时会遵循以下方法进行“递归”查找：

• 查找 实例对象本身 $\rightarrow$ 没有 $\rightarrow$
• 查找 实例.__proto__ $\rightarrow$ 没有 $\rightarrow$
• 继续查找 Constructor.prototype.__proto__ $\rightarrow$ 没有 $\rightarrow$
-... 直到查找到 Object.prototype.__proto__ === null 为止。如果依然找不到，则返回 undefined。

3. 多级继承示例

-------------<-$\text{Grand} \rightarrow \text{Far} \rightarrow \text{Child}$--$\rightarrow$--|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|--$\rightarrow$-|-|-|-|-|-|--$\rightarrow$-|-|-|-|-|-|--$\rightarrow$-|-|-|-|-|-|--$\rightarrow$-|-|-|-|--$\rightarrow$-|-|-|-|--$\rightarrow$- $|-| - | - | - | - | - | - | - | - | - | - | - | - | - | - |-|$

function Grand{ this.card = '1亿' } // 家产卡项内容不详但极多项内容不详但极多项内容不详但极多项内容不详但极多项内容不详但极多项内容不详但极多项内容不详但极多项内容不详但极多项内容不详但极多项内容不详但极多项内容不详但极多项内容不详但极多项内容不详但极多项内容不详但极多项内容不详但极多项内容不详但极多项内容不详但极多项内容不详但极多一项/财产定义在了原型的房子上定义在了原型的房子上定义在了原型的房子上定义在了原型的房子上定义在了原型的房子上定义在了原型的房子上定义在了原型的房子上定义在了原型的房子上定义在了原型的房子上定义在了原型的房子上定义在了原型的房子上定义在了原型的房子上定义在了原型的房子上定义在了原型的房子上定義在房子的房子的房子的房子的房子的房子的房子的房子的房子的房子的房子的房子的房子的房子的房子的房子的房子的方子上Grand
Grand\.prototype\.house = function{ console\.log;}`
`function Far { this\.lastName = '张' }
Far\.prototype = new Grand
`function Child { this\.age = 10 }
Child\.prototype = new Far
`const p = new Child
console\.log // 输出: 张
p\.house // 输出: big house 

---