今天我把书中的 5 种继承模式结合自己这些年的实操踩坑整理出来每种都配可运行的精简代码、高频踩坑点和面试常考方向。看完不仅能搞定手写继承的面试题，日常开发选技术方法也能心里有底。话说回来，

从先聊透来看。JS 的继承和 Java 不是一回事

在 Java 这类基于类的语言里继承干了两件事：

1. 代码复用——子类复用父类逻辑，减少重复代码；
2. 类型程序规范——编译期检查，不用写强制类型转换。

但 JS 是弱类型语言，根本不存在类型转换这回事。对 JS 的对象关键的是它能做什么而不是它从哪个类继承来的。JS 的继承，主要目标只有一个：代码复用。

而且 JS 走的是 “原型继承` 的路子 —— 对象直接从另一个对象继承属性，不需要中间夹一个 “类” 的概念。简单讲的 class 本质上只是给原型套了层大家眼熟的语法糖而已。

说到伪类继承，最眼熟的写法，坑也最多

简单讲 “伪类”。就是 JS 为了迎合大家写类的习惯，搞出来的一套 “构造函数 + prototype” 的模拟写法。看着像 Java 的类，实则底层还是原型。

主要原因

每个函数创建的时候。都会自带一个 prototype 对象，其中有个 constructor 指回函数本身。当我们用 new 调用这个函数时会生成一个新对象，这个对象会沿着构造函数的 prototype 链获取属性和方法。

实现继承。只需要把子类的 prototype 替换成父类实例，这样子类实例就能顺着原型链拿到父类的方法。话说回来，

// 父类构造函数
function Mammal {
this.name = name;}
Mammal.prototype.get_name = function {
return this.name;}，Mammal.prototype.says = function {
return this.saying || '';}，// 子类构造函数
function Cat {
this.name = name;this.saying = 'meow';}
// 主要：子类原型替换为父类实例
Cat.prototype = new Mammal;// 给子类
自有方法
Cat.prototype.purr = function {
let s = '';for {
s += s?'-r' : 'r'，}
return s;}，// 重写父方法
Cat.prototype.get_name = function {
return `${this.says} ${this.name} ${this.says}`;}，// 测试
const myCat = new Cat;console.log);// 'meow'
console.log);// 'r-r-r-r-r'
console.log);// 'meow Henrietta meow'

# 优雅封装 #

Function.prototype.inherits = function {
this.prototype = new Parent;return this，};// 链式写法清爽很多
const Cat = function {
this.name = name;this.saying = 'meow';}.inherits，

踩坑合集

1. 漏写 new 直接污染全局： 不使用 new 调用构造函数时this 会绑定到全局对象（浏览器里是 w​indow​)。结果是悄无声息地修改全局变量，没有编译警告。也没有运行时报错——排查起来极其痛苦。约定首字母大写只是“肉眼”检测手段，并非语法保障。
2. 所有属性全公开、毫无隐私： 属性、方法全部挂在实例或原型上，可随意读取或覆盖。想实现私有只能靠下划线命名“自欺欺人”。
3. 调用父类方法不优雅： 子类重写后若想 调用父级实现，需要手动定位父构造函数原型并 .call ——代码冗长且易出错。
4. 诱导过度复杂的层级结构： 模仿 Java 写三四层深度的 inheritance chain。会让原型链绕得自己都看不懂，从而失去 JS 原生设计初衷。

至于对象说明符，一个被忽略的传参调整技巧

If a constructor needs many parameters。passing m one by one is error‑prone. The solution is to pass a single configuration object where keys map to arguments,making order irrelevant and defaults easy to apply.

// 糟糕的写法：参数多了根本记不住顺序
// const myObject = maker;// 舒服的写法：传对象，可读性拉满
const myObject = maker({
first这方面。'张',last: '三',city: '北京',state: '北京',age,});

实用场景 ✅

• SaaS / UI组件库：配置项超过 5 个以上  时几乎必备；
• CamelCase 与后端返回 JSON 无缝对接：直接把后端数据丢进构造函数生成带方法的业务对象；
• 与 TypeScript 接口配合，实现自动提示与默认值填充；

# 小结 # : 虽然大多数人已经在日常编码中使用这种方式，但很少有人意识到它源自《JS 语言精粹》章节里关于“对象说明符”的常用方法。

再看原型式继承，回归本质，对象直接继承对象

No constructor。no prototype juggling—just pick an existing object as prototype of a new one and tweak differences.

// 基础对象
const myMammal = {
说到name，'Herb Mammal',get_name { return this.name;老实说，}，says { return this.saying || '';}
}，// 基于基础对象生成新实例
const myCat = Object.create;
// 差异化补丁
myCat.name = 'Henrietta';myCat.saying = 'meow';怎么说呢，myCat.purr = function {
let s='';for s+=s，'-r':'r';return s，};myCat.get_name = function {
return `${this.says} ${this.name} ${this.says}`;}，

适用场景 🎯

• Simplified data‑model inheritance – e.g.,nested lexical scopes in a parser;
• Lighter weight objects when you don’t need full‑blown classes;
• Dynamically augmenting objects at runtime without touching constructors.

至于函数化模式，真正实现私有属性的继承方案

A factory function creates an object。closes over private variables via closure,and returns an object that only exposes privileged methods.

// 父级工厂函数
function mammal {
const that = {};其实，// 特权方法
that.get_name = function { return spec.name;}，that.says = function { return spec.saying || '';}，return that;话说回来，}
// 子级工厂函数
function cat {
spec.saying = spec.saying || 'meow';老实说，// 调用父级工厂得到基础对象
const that = mammal;老实说，// 子级专属能力
that.purr = function {
let s='';for s+=s，'-r':'r';return s，};话说回来，that.get_name = function {
return `${that.says} ${spec.name} ${that.says}`;}，return that;}
// 测试 —— 完全不需要 new
const myCat = cat;console.log);// "meow Henrietta meow"
console.log;// undefined —— 真正私有

If you need to call overridden parent method elegantly,add a generic .superior-helper:

Object.prototype.superior = function {
const that = this;const method = that;return function { return method.apply;}，};function coolcat{
const that = cat;const superNameFn= that.superior;that.get_name = function{
return `like ${superNameFn} baby`;}，return that;}
const myCoolCat= coolcat;console.log);// "like meow Bix meow baby"

模式优势 🚀

• 真正私有性： 闭包隐藏内部状态，对外不可直接修改；
• 杜绝 new 泡沫： 普通函数调用，不会污染全局；
• 组合灵活： 任何工厂都可以自由嵌套，实现高度可组合的行为树；

说到部件模式，组合比更好继承，为对象 “加装” 能力

Create small reusable mixin functions. Each mixin receives a target object。augments it with methods/properties,and returns same object – enabling chainable composition.

function eventuality{
const registry={};// 注册事件
that.on=function{
const handler={method,parameters};其实，registry，registry.push:registry=;return that，};// 派发事件
that.fire=function{
const type=typeof event==='string'?event:event.type;ifreturn that;registry.forEach(handler=>{
const fn=typeof handler.method==='string'?that:handler.method;fn.apply，});return that，};return that，}

The mixin can be applied to any plain object:

// 给普通对象加事件能力
const myObj= eventuality;myObj.on=>console.log);myObj.fire，// 输出 hello

设计思路 🧩

• "组合比更好 inheritance"——通过混入来拼装功能，而不是通过深层次原型链来强行耦合；
• "弱类型即优势"——只要拥有对应的方法。就能使用，无需关心是否属于同一「类别」；

说到最终复盘。这么多模式，该怎么选，🚦

The five patterns each solve a specific set of pain points. Pick one whose strengths align with your project constraints:

1. Pseudo‑class inheritance: When your team already writes ES6 ,keep using it but stay aware of underlying prototype mechanics and classic “忘记 new” trap.

: A universal optimisation for constructors with many arguments – improves readability and reduces bugs caused by parameter order mistakes.

. Prototype‑style inheritance: : Ideal for lightweight objects where you just need a base prototype plus a few overrides – perfect for parsers or simple domain models.

. Functional pattern: : When you require true privacy or want to avoid new altoger – great for SDKs/libraries demanding strong encapsulation.

. Mixin/Component pattern: : When behaviour composition beats deep hierarchies – use it for event systems。traits,or any feature‑plug‑in architecture.

关键提醒

• ⚠️新手常踩「漏写 new」导致全局泄漏<\/li>" \

This final text should be well-formatted without extra explanations beyond HTML content as requested.

。

---