继承的本质是属性/方法查找机制:实例.__proto__→构造函数.prototype→原型对象.__proto__→object.prototype→null;js无类,只有对象委托,继承即动态查找链。

直接画出 JS 继承机制的核心结构,关键不是堆砌术语,而是理清“谁指向谁”和“为什么这样设计”。一张实用的思维导图,应围绕原型链如何工作展开,再分层带出继承方案、问题与演进逻辑。
一、中心锚点:必须画清楚的三个核心对象关系
导图最中心写“继承的本质:属性/方法查找机制”,向外延伸三条主干:
-
构造函数 → 有
prototype属性,指向它的原型对象(显式) -
原型对象 → 有
constructor属性,指回构造函数;它本身是普通对象,也有__proto__ -
实例对象 → 有
__proto__属性(隐式),指向其构造函数的prototype
用箭头明确标出:实例.__proto__ → 构造函数.prototype → 原型对象.__proto__ → Object.prototype → null。这条链就是查找终点,也是整个导图的骨架。
二、左分支:六种继承方案对比(按时间+缺陷递进)
从原型链继承开始,向左列出主流方案,每种只记1个核心操作 + 1个致命缺陷 + 1个改进动机:
- 原型链继承:子类
prototype = new 父类()→ 引用属性共享、无法传参 → 引出借用构造函数 - 借用构造函数:子类中
Parent.call(this, ...)→ 无法继承父类原型方法 → 引出组合继承 - 组合继承:两者结合 → 父类构造函数被调用两次 → 引出寄生组合式继承
- 寄生组合式继承:只调用一次父类构造函数,复用父类原型 → 当前最推荐的 ES5 手动实现方式
- ES6 class 继承:语法糖,底层仍是寄生组合式继承逻辑 →
extends和super()是关键节点 - Object.create() 方式:直接指定
__proto__或创建干净原型 → 适合简单对象间委托,不涉及构造函数
三、右分支:绕不开的底层细节与常见误区
向右延伸,聚焦开发者最容易卡壳的点,每个配一句简明解释:
-
__proto__不是标准属性:它是浏览器兼容实现,标准写法是Object.getPrototypeOf(obj) -
Function 也是对象:所以函数也有
__proto__,它指向Function.prototype,而后者__proto__指向Object.prototype -
所有函数的 prototype 默认有 constructor:但手动赋值
Child.prototype = {...}会丢失,需补constructor: Child -
instanceof 的原理:检查右边构造函数的
prototype是否在左边对象的原型链上
四、底部横线:一句话收束设计思想
在导图最下方加一条横线,写:JS 没有“类”,只有对象间的委托;继承不是复制,是动态查找链。 这句话点破本质,避免陷入 Java 式理解陷阱。











