如何实现继承_javascript中有哪些模式？-js教程-PHP中文网

如何实现继承_javascript中有哪些模式？

狼影

发布： 2025-12-23 14:43:41

原创

325人浏览过

JavaScript继承有四种模式：1.原型链继承，通过prototype实现方法复用但属性共享；2.借用构造函数，用call/apply复制属性但无法继承方法；3.组合继承，结合前两者，属性独立且方法复用；4.ES6 class，语法糖封装原型链，语义清晰且功能完备。

如何实现继承_javascript中有哪些模式？

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 ← 方法没被继承！

登录后复制

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

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

MimicPC

一个AI驱动的浏览器运行工具，可以通过浏览器在线安装及运行各种开源的AI应用程序

145

查看详情

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

关键写法：

子构造函数内用 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中有哪些模式？的详细内容，更多请关注php中文网其它相关文章！