JavaScript继承的几种常见方式有哪些？

JavaScript虽无传统面向对象语言的原生继承机制，却通过原型链、构造函数借用、组合继承和ES6 class四种核心方式灵活实现“继承”本质——让子对象访问父对象的属性与方法；其中ES6 class作为现代标准写法语义清晰、功能完备，推荐日常使用，而组合继承则是理解底层原理的关键桥梁，掌握“属性靠call、方法靠prototype”这一主线，便能轻松驾驭各种继承场景。

JavaScript 中没有传统面向对象语言（如 Java、C++）那样的 class 继承关键字，但可以通过多种方式模拟“继承”行为。核心思路是让一个对象能访问另一个对象的属性和方法。以下是几种主流且实用的继承模式，按常用程度和现代实践排序：

原型链继承（最基础）

利用 JavaScript 原型（prototype）机制，将父构造函数的实例赋给子构造函数的 prototype。

✅ 优点：简单直观，复用父类方法。
❌ 缺点：所有子实例共享父类引用类型属性（如数组、对象），修改会互相影响；无法向父构造函数传参。

示例：

function Animal(name) {
  this.name = name;
  this.hobbies = ['sleep'];
}
Animal.prototype.say = function() { return 'Hi'; };

function Dog() {}
Dog.prototype = new Animal(); // 关键：继承原型
Dog.prototype.constructor = Dog;

const d1 = new Dog();
const d2 = new Dog();
d1.hobbies.push('bark');
console.log(d2.hobbies); // ['sleep', 'bark'] ← 被意外修改！

借用构造函数（经典组合继承的基础）

在子构造函数中用 call 或 apply 调用父构造函数，实现属性“复制”，避免共享问题。

✅ 优点：每个实例独有属性，支持传参。
❌ 缺点：父类方法无法复用（每次新建实例都重新创建函数）。

示例：

function Animal(name, age) {
  this.name = name;
  this.age = age;
  this.hobbies = ['sleep'];
}
Animal.prototype.say = function() { return 'Hi'; };

function Dog(name, age, breed) {
  Animal.call(this, name, age); // 关键：借用构造函数
  this.breed = breed;
}

const d1 = new Dog('Xiaohei', 3, 'Labrador');
console.log(d1.hobbies); // ['sleep'] —— 独立副本
console.log(d1.say); // undefined ← 方法没被继承！

组合继承（最常用、推荐初学掌握）

结合前两者：用借用构造函数继承属性 + 用原型链继承方法。兼顾独立性和复用性。

✅ 优点：属性不共享、方法可复用、支持传参。
❌ 缺点：父构造函数被调用两次（一次在设置原型时，一次在子构造中），略低效（但可接受）。

关键写法：

• 子构造函数内用 Parent.call(this, ...) 初始化实例属性
• 子构造函数外用 Child.prototype = Object.create(Parent.prototype) 设置原型链（比 new Parent() 更干净）
• 手动修复 constructor

ES6 class 继承（现代标准写法）

class 是语法糖，底层仍是原型链，但更清晰、安全，支持 super、静态方法、getter/setter 等。

✅ 优点：语义明确、不易出错、与主流语言接轨、支持 extends 多重继承抽象（通过 mixin 可扩展）
❌ 注意：必须先调用 super() 才能访问 this；class 声明不会被提升。

示例：

class Animal {
  constructor(name) {
    this.name = name;
  }
  say() { return `I'm ${this.name}`; }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 必须！
    this.breed = breed;
  }
  bark() { return 'Woof!'; }
}

const dog = new Dog('Wangcai', 'Poodle');
console.log(dog.say()); // I'm Wangcai
console.log(dog.bark()); // Woof!

基本上就这些。日常开发优先用 ES6 class；理解原理时重点掌握组合继承；原型链和借用构造函数是它的“零件”。不需要死记硬背，抓住“属性靠 call、方法靠 prototype”这个主线，就容易理清了。

终于介绍完啦！小伙伴们，这篇关于《JavaScript继承的几种常见方式有哪些？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！