JavaScript继承机制与六种实现方式详解-代码聚汇网

JavaScript继承机制与六种实现方式详解

互联网编程·2026-08-09·阅读 29 GEO检测（免费）

JavaScript继承原型链ES6 Class

|难度：普通|阅读约 29 分钟

1. JavaScript继承机制深度解析

在JavaScript的世界里，继承是构建复杂应用的基础支柱。与传统的基于类的语言不同，JS采用原型链实现继承，这种独特机制让许多从其他语言转来的开发者感到困惑。我至今记得第一次看到__proto__属性时的茫然——这个看似简单的概念背后，隐藏着JS最精妙的设计哲学。

1.1 为什么需要继承

假设我们正在开发一个电商系统，有Product基类和Book、Clothing等子类。没有继承的话，每个子类都要重复定义name、price等属性和getDescription()方法。这不仅造成代码冗余，更致命的是当需要修改共同逻辑时（比如价格计算规则），必须在所有子类中逐个修改——这是维护的噩梦。

通过继承，我们可以：

将通用属性和方法集中在父类
子类通过扩展获得父类能力
实现多态（同一方法在不同子类有不同表现）

javascript复制class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
  
  getDescription() {
    return `${this.name} - $${this.price}`;
  }
}

class Book extends Product {
  constructor(name, price, author) {
    super(name, price);
    this.author = author;
  }
  
  // 方法重写
  getDescription() {
    return `${super.getDescription()} by ${this.author}`;
  }
}

1.2 原型链的本质

JS的继承通过原型链实现，每个对象都有__proto__属性指向其原型。当访问对象属性时，如果自身不存在，就会沿着原型链向上查找。这种机制有几点关键特性：

原型是活链接：修改原型属性会立即影响所有实例
构造函数关联：Constructor.prototype决定实例的原型
终点是null：Object.prototype.__proto__ === null

javascript复制function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(`${this.name} makes a noise`);
};

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks`);
  }
}

const d = new Dog('Rex');
d.speak(); // "Rex barks"

console.log(d.__proto__ === Dog.prototype); // true
console.log(Dog.prototype.__proto__ === Animal.prototype); // true

关键理解：extends关键字本质是在设置Child.prototype.__proto__ = Parent.prototype

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 六种继承方式实战对比

2.1 原型链继承

最基础的继承方式，直接让子类原型指向父类实例：

javascript复制function Parent() {
  this.names = ['kevin', 'daisy'];
}

function Child() {}

Child.prototype = new Parent();

const child1 = new Child();
child1.names.push('bob');
console.log(child1.names); // ['kevin', 'daisy', 'bob']

const child2 = new Child();
console.log(child2.names); // ['kevin', 'daisy', 'bob']

问题：

引用类型属性被所有实例共享
无法向父类构造函数传参

2.2 构造函数继承

在子类构造函数中调用父类构造函数：

javascript复制function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue'];
}

function Child(name) {
  Parent.call(this, name);
}

const child1 = new Child('Tom');
child1.colors.push('green');
console.log(child1.colors); // ['red', 'blue', 'green']

const child2 = new Child('Jerry');
console.log(child2.colors); // ['red', 'blue']

优点：

避免了引用属性共享
可向父类传参

缺点：

方法必须在构造函数中定义（每次实例化都会创建新方法）
无法访问父类原型上的方法

2.3 组合继承（经典继承）

结合原型链和构造函数的优势：

javascript复制function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue'];
}

Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name); // 第二次调用Parent
  this.age = age;
}

Child.prototype = new Parent(); // 第一次调用Parent
Child.prototype.constructor = Child;

const child1 = new Child('Tom', 18);
child1.colors.push('green');
console.log(child1.colors); // ['red', 'blue', 'green']
child1.sayName(); // "Tom"

const child2 = new Child('Jerry', 20);
console.log(child2.colors); // ['red', 'blue']

问题：父类构造函数被调用两次，导致子类原型上存在冗余属性

2.4 原型式继承

Object.create的底层实现原理：

javascript复制function createObj(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

const person = {
  name: 'Kevin',
  friends: ['Daisy', 'Kelly']
};

const p1 = createObj(person);
p1.name = 'Tom';
p1.friends.push('Bob');

const p2 = createObj(person);
console.log(p2.friends); // ['Daisy', 'Kelly', 'Bob']

适用场景：不需要构造函数的简单对象继承

2.5 寄生式继承

在原型式继承基础上增强对象：

javascript复制function createAnother(original) {
  const clone = Object.create(original);
  clone.sayHi = function() {
    console.log('hi');
  };
  return clone;
}

const person = {
  name: 'Kevin',
  friends: ['Daisy', 'Kelly']
};

const p1 = createAnother(person);
p1.sayHi(); // "hi"

问题：方法无法复用（类似构造函数继承）

2.6 寄生组合式继承（最优方案）

javascript复制function inheritPrototype(child, parent) {
  const prototype = Object.create(parent.prototype);
  prototype.constructor = child;
  child.prototype = prototype;
}

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue'];
}

Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

inheritPrototype(Child, Parent);

const child = new Child('Tom', 18);
console.log(child instanceof Parent); // true

优势：

只调用一次父类构造函数
原型链保持不变
能正常使用instanceof和isPrototypeOf

3. ES6 Class继承详解

3.1 基本语法

javascript复制class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} makes a noise`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 必须在使用this前调用
    this.breed = breed;
  }
  
  speak() {
    super.speak();
    console.log(`${this.name} barks`);
  }
}

const d = new Dog('Rex', 'Labrador');
d.speak();
// "Rex makes a noise"
// "Rex barks"

3.2 底层实现原理

Babel转译后的代码揭示本质：

javascript复制// 转译前
class A {}
class B extends A {}

// 转译后
function _inherits(subClass, superClass) {
  subClass.prototype = Object.create(
    superClass && superClass.prototype,
    {
      constructor: {
        value: subClass,
        writable: true,
        configurable: true
      }
    }
  );
  if (superClass) _setPrototypeOf(subClass, superClass);
}

function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf || 
    function _setPrototypeOf(o, p) {
      o.__proto__ = p;
      return o;
    };
  return _setPrototypeOf(o, p);
}

3.3 静态方法与属性继承

javascript复制class Animal {
  static planet = "Earth";
  
  static getPlanet() {
    return this.planet;
  }
}

class Dog extends Animal {
  static planet = "Mars";
}

console.log(Dog.getPlanet()); // "Mars"
console.log(Animal.getPlanet()); // "Earth"

3.4 super关键字的四种用法

构造函数中：super(args) 调用父类constructor
实例方法中：super.method() 调用父类方法
静态方法中：super.staticMethod() 调用父类静态方法
对象字面量：super.prop 访问父类属性

javascript复制class Parent {
  static staticMethod() {
    return 'static';
  }
  
  instanceMethod() {
    return 'instance';
  }
}

class Child extends Parent {
  static staticMethod() {
    return `${super.staticMethod()} child`;
  }
  
  instanceMethod() {
    return `${super.instanceMethod()} child`;
  }
}

console.log(Child.staticMethod()); // "static child"
console.log(new Child().instanceMethod()); // "instance child"

4. 高级继承模式与陷阱规避

4.1 Mixin模式实现多重继承

javascript复制const Serializable = Base => class extends Base {
  serialize() {
    return JSON.stringify(this);
  }
};

const Loggable = Base => class extends Base {
  log() {
    console.log(this);
  }
};

class Person {
  constructor(name) {
    this.name = name;
  }
}

class Employee extends Serializable(Loggable(Person)) {
  constructor(name, salary) {
    super(name);
    this.salary = salary;
  }
}

const e = new Employee('John', 50000);
e.log(); // 输出对象
console.log(e.serialize()); // JSON字符串

4.2 私有字段继承限制

javascript复制class Parent {
  #privateField = 42;
  
  getPrivate() {
    return this.#privateField;
  }
}

class Child extends Parent {
  #privateField = 100;
  
  getChildPrivate() {
    return this.#privateField;
  }
}

const c = new Child();
console.log(c.getPrivate()); // 42
console.log(c.getChildPrivate()); // 100

4.3 常见陷阱与解决方案

陷阱1：忘记调用super()

javascript复制class Child extends Parent {
  constructor() {
    // 忘记super()
    this.prop = 123; // ReferenceError
  }
}

陷阱2：错误的方法遮蔽

javascript复制class Parent {
  method() {
    console.log('parent');
  }
}

class Child extends Parent {
  method() {
    // 忘记调用super.method()
    console.log('child');
  }
}

陷阱3：原型污染

javascript复制function Parent() {}
Parent.prototype.arr = [1, 2, 3];

function Child() {}
Child.prototype = new Parent();

const c1 = new Child();
c1.arr.push(4);

const c2 = new Child();
console.log(c2.arr); // [1, 2, 3, 4]

解决方案：使用Object.defineProperty定义不可枚举属性

javascript复制Object.defineProperty(Parent.prototype, 'arr', {
  value: [1, 2, 3],
  writable: true,
  enumerable: false,
  configurable: true
});

4.4 性能优化建议

避免深原型链：超过5层的原型链会影响查找性能
谨慎使用动态原型：运行时修改原型会导致优化失效
优先使用类语法：引擎对类有更好的优化
冻结不变量：Object.freeze()可以阻止原型修改

javascript复制class Optimized {
  constructor() {
    this.method = this.method.bind(this);
  }
  
  method() {
    // 绑定实例避免原型查找
  }
}

5. 实战：构建可扩展UI组件系统

5.1 基础组件设计

javascript复制class UIComponent {
  constructor(element) {
    this.element = element;
    this.init();
  }
  
  init() {
    this.bindEvents();
  }
  
  bindEvents() {
    // 默认空实现
  }
  
  render(data) {
    this.element.innerHTML = this.template(data);
  }
  
  template() {
    throw new Error('必须实现template方法');
  }
}

5.2 具体组件实现

javascript复制class Button extends UIComponent {
  bindEvents() {
    this.element.addEventListener('click', this.handleClick.bind(this));
  }
  
  handleClick() {
    this.dispatchEvent('click', { time: Date.now() });
  }
  
  template() {
    return `<button class="btn">${this.text}</button>`;
  }
}

class ToggleButton extends Button {
  constructor(element) {
    super(element);
    this.state = false;
  }
  
  handleClick() {
    this.state = !this.state;
    this.element.classList.toggle('active', this.state);
    super.handleClick();
  }
  
  template() {
    return `
      <button class="btn toggle ${this.state ? 'active' : ''}">
        ${this.text}
      </button>
    `;
  }
}

5.3 插件系统实现

javascript复制function withTooltip(Base) {
  return class extends Base {
    constructor(...args) {
      super(...args);
      this.tooltip = document.createElement('div');
      this.tooltip.className = 'tooltip';
      document.body.appendChild(this.tooltip);
    }
    
    showTooltip(text) {
      this.tooltip.textContent = text;
      this.tooltip.style.display = 'block';
    }
    
    hideTooltip() {
      this.tooltip.style.display = 'none';
    }
  };
}

const EnhancedButton = withTooltip(Button);
const btn = new EnhancedButton(document.getElementById('btn'));
btn.showTooltip('Click me!');

5.4 性能优化实践

事件委托：在父组件统一管理事件
虚拟DOM：实现差异更新
懒加载：动态加载子组件
记忆化：缓存渲染结果

javascript复制class OptimizedComponent extends UIComponent {
  constructor() {
    super();
    this.cache = new Map();
  }
  
  render(data) {
    const cacheKey = JSON.stringify(data);
    if (this.cache.has(cacheKey)) {
      this.element.innerHTML = this.cache.get(cacheKey);
      return;
    }
    
    const html = this.template(data);
    this.cache.set(cacheKey, html);
    this.element.innerHTML = html;
  }
}