Javascrpt的继承方式介绍

在 JavaScript 中实现继承主要通过原型链(Prototype Chain)实现,以下是常见的几种继承方式及示例:


1. 原型链继承

通过将子类的原型指向父类的实例实现:

javascript 复制代码
function Parent() {
  this.name = 'Parent';
}
Parent.prototype.say = function() {
  console.log(this.name);
};

function Child() {}
Child.prototype = new Parent(); // 继承父类

const child = new Child();
child.say(); // 输出 "Parent"

缺点:所有子类实例共享父类的引用属性(如数组、对象),修改会相互影响。


2. 构造函数继承

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

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

function Child(name) {
  Parent.call(this, name); // 继承父类属性
}

const child1 = new Child('Child1');
child1.colors.push('green'); // 修改不影响其他实例
const child2 = new Child('Child2');
console.log(child2.colors); // ['red', 'blue']

缺点:无法继承父类原型上的方法。


3. 组合继承(经典继承)

结合原型链继承和构造函数继承:

javascript 复制代码
function Parent(name) {
  this.name = name;
}
Parent.prototype.say = function() {
  console.log(this.name);
};

function Child(name) {
  Parent.call(this, name); // 继承属性
}
Child.prototype = new Parent(); // 继承方法

const child = new Child('Child');
child.say(); // 输出 "Child"

缺点 :父类构造函数被调用两次(Parent.callnew Parent())。


4. 寄生组合继承(最优解)

优化组合继承,避免重复调用父类构造函数:

javascript 复制代码
function Parent(name) {
  this.name = name;
}
Parent.prototype.say = function() {
  console.log(this.name);
};

function Child(name) {
  Parent.call(this, name);
}
Child.prototype = Object.create(Parent.prototype); // 核心:创建父类原型的副本
Child.prototype.constructor = Child; // 修复构造函数指向

const child = new Child('Child');
child.say(); // 输出 "Child"

5. ES6 class 继承

使用 extendssuper 关键字(语法糖,底层仍是原型链):

javascript 复制代码
class Parent {
  constructor(name) {
    this.name = name;
  }
  say() {
    console.log(this.name);
  }
}

class Child extends Parent {
  constructor(name) {
    super(name); // 调用父类构造函数
  }
}

const child = new Child('Child');
child.say(); // 输出 "Child"

总结

  • 推荐使用 ES6 class:语法简洁,可读性强。
  • 兼容性要求高时:使用寄生组合继承(ES5 环境)。
  • 避免使用纯原型链或纯构造函数继承:它们各自有明显缺陷。
相关推荐
然我1 分钟前
链表指针玩不转?从基础到双指针,JS 实战带你破局
前端·数据结构·算法
江城开朗的豌豆1 分钟前
组件封装实战:如何设计灵活又好用的前端组件?
前端·javascript·vue.js
EndingCoder9 分钟前
算法与前端的可访问性
前端·算法·递归·树形结构
brzhang16 分钟前
别再梭哈 Curosr 了!这 AI 神器直接把需求、架构、任务一条龙全干了!
前端·后端·架构
Kagol25 分钟前
TinyEditor v4.0 alpha 版本发布,更强大的表格、更丰富的表情、体验更好的图片/视频/文件上传功能
前端·开源
The_era_achievs_hero29 分钟前
微信131~140
开发语言·javascript·微信
然我34 分钟前
路由还能这么玩?从懒加载到路由守卫,手把手带你解锁 React Router 进阶技巧
前端·react.js·面试
良木林2 小时前
JavaScript书写基础和基本数据类型
开发语言·前端·javascript
工业甲酰苯胺8 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang8 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构