刷刷题46(常见的三种js继承类型及其优缺点)

一、原型链继承

原理

通过将 ‌子类构造函数的原型(prototype ‌ 指向 ‌父类实例‌,实现继承链。

示例

javascript 复制代码
// 父类
function Animal(name) {
  this.name = name || 'Animal';
  this.colors = ['black', 'white'];
}
Animal.prototype.say = function() {
  console.log(`I'm ${this.name}`);
};

// 子类
function Cat() {}
Cat.prototype = new Animal(); // 原型链继承

// 测试
const cat1 = new Cat();
cat1.say(); // I'm Animal(继承父类方法)
cat1.colors.push('orange');
console.log(cat1.colors); // ['black', 'white', 'orange']

const cat2 = new Cat();
console.log(cat2.colors); // ['black', 'white', 'orange'](引用类型属性被共享!)

特点

  • 优点‌:简单易实现,可继承父类实例属性及原型方法。

  • 缺点‌:

    • 所有子类实例共享父类实例的 ‌引用类型属性 ‌(如 colors 数组)。
    • 无法向父类构造函数传递参数(如 name 参数在子类中无法自定义)。

二、构造函数继承(借用构造函数)

原理

在子类构造函数中通过 callapply 调用父类构造函数,继承父类实例属性。

示例

javascript 复制代码
// 父类
function Animal(name) {
  this.name = name || 'Animal';
  this.colors = ['black', 'white'];
}
Animal.prototype.say = function() {
  console.log(`I'm ${this.name}`);
};

// 子类
function Cat(name) {
  Animal.call(this, name); // 构造函数继承(可传参)
}

// 测试
const cat1 = new Cat('Tom');
cat1.colors.push('orange');
console.log(cat1.colors); // ['black', 'white', 'orange']
console.log(cat1.name); // Tom(参数传递成功)

const cat2 = new Cat('Jerry');
console.log(cat2.colors); // ['black', 'white'](引用类型属性独立!)

cat1.say(); // TypeError: cat1.say is not a function(无法继承父类原型方法!)

特点

  • 优点‌:

    • 解决引用类型属性共享问题。
    • 支持向父类构造函数传递参数。
  • 缺点 ‌:无法继承父类原型上的方法(如 say 方法)。


三、ES6 Class 类继承

原理

通过 extendssuper 关键字实现继承,底层基于 ‌寄生组合继承‌,语法更简洁。

示例

javascript 复制代码
// 父类
class Animal {
  constructor(name) {
    this.name = name || 'Animal';
    this.colors = ['black', 'white'];
  }
  say() {
    console.log(`I'm ${this.name}`);
  }
}

// 子类
class Cat extends Animal {
  constructor(name) {
    super(name); // 调用父类构造函数
    this.age = 2;
  }
  // 可扩展子类方法
  meow() {
    console.log('Meow!');
  }
}

// 测试
const cat1 = new Cat('Tom');
cat1.say(); // I'm Tom(继承父类方法)
cat1.colors.push('orange');
console.log(cat1.colors); // ['black', 'white', 'orange']

const cat2 = new Cat('Jerry');
console.log(cat2.colors); // ['black', 'white'](引用类型属性独立!)
cat2.meow(); // Meow!(子类自定义方法)

特点

  • 优点‌:

    • 语法简洁,完全面向对象。
    • 解决引用类型共享问题,支持传参。
    • 自动继承父类原型方法。
  • 底层实现 ‌:
    class 继承本质上是通过 ‌寄生组合继承‌ 实现,避免构造函数重复调用,性能最优。

四、对比总结

继承方式 核心原理 优点 缺点
原型链继承 子类原型指向父类实例 简单,可继承父类原型方法 引用类型属性共享,无法传参
构造函数继承 子类构造函数中调用父类构造函数 解决属性共享问题,支持传参 无法继承父类原型方法
ES6 Class 继承 基于 extendssuper 的语法糖 语法简洁,解决所有继承问题,性能最优 需支持 ES6 环境
相关推荐
喝拿铁写前端4 分钟前
不同命名风格在 Vue 中后台项目中的使用分析
javascript·vue.js
ylfhpy7 分钟前
Java面试黄金宝典22
java·开发语言·算法·面试·职场和发展
sen_shan7 分钟前
Vue3+Vite+TypeScript+Element Plus开发-02.Element Plus安装与配置
前端·javascript·typescript·vue3·element·element plus
疾风铸境19 分钟前
Qt5.14.2+mingw64编译OpenCV3.4.14一次成功记录
前端·webpack·node.js
晓风伴月23 分钟前
Css:overflow: hidden截断条件‌及如何避免截断
前端·css·overflow截断条件
最新资讯动态26 分钟前
使用“一次开发,多端部署”,实现Pura X阔折叠的全新设计
前端
爱泡脚的鸡腿41 分钟前
HTML CSS 第二次笔记
前端·css
佩奇的技术笔记1 小时前
中级:Maven面试题精讲
java·面试·maven
灯火不休ᝰ1 小时前
前端处理pdf文件流,展示pdf
前端·pdf
智践行1 小时前
Trae开发实战之转盘小程序
前端·trae