JS 继承有几种方式?

1. 原型链继承

核心思路: 让子类的 prototype 指向父类实例。

js 复制代码
function Parent() {
  this.name = 'Parent'
}
Parent.prototype.sayHello = function () {
  console.log('Hello from Parent')
}

function Child() {}
Child.prototype = new Parent() // 继承 Parent
Child.prototype.constructor = Child

const child = new Child()
console.log(child.name) // "Parent"
child.sayHello() // "Hello from Parent"

优点: 父类方法可复用 ❌ 缺点: 1. 共享引用类型属性(如 arr = [] 会被多个实例共享),2. 无法向父类构造函数传参

2. 借用构造函数继承

核心思路: 在子类构造函数中使用 call 继承父类属性。

js 复制代码
function Parent(name) {
  this.name = name
}
function Child(name, age) {
  Parent.call(this, name) // 继承 Parent
  this.age = age
}
const child = new Child('Rain', 18)
console.log(child.name, child.age) // "Rain", 18

优点: 1. 解决原型链继承共享问题,2. 可传参 ❌ 缺点: 无法继承父类原型上的方法

3. 组合继承(原型链 + 构造函数继承,最常用)

核心思路: 结合前两种方式,继承属性用构造函数,继承方法用原型链

js 复制代码
function Parent(name) {
  this.name = name
}
Parent.prototype.sayHello = function () {
  console.log('Hello from Parent')
}

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

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

const child = new Child('Rain', 18)
console.log(child.name, child.age) // "Rain", 18
child.sayHello() // "Hello from Parent"

优点: 解决了前两种方法的缺陷 ❌ 缺点: 调用两次 Parent 构造函数(一次 call,一次 Object.create()

4. Object.create() 继承(原型式继承)

核心思路: 直接用 Object.create() 创建一个新对象,继承已有对象。

js 复制代码
const parent = {
  name: 'Parent',
  sayHello() {
    console.log('Hello!')
  },
}
const child = Object.create(parent)
child.age = 18
console.log(child.name, child.age) // "Parent", 18
child.sayHello() // "Hello!"

优点: 适合创建对象而非类的继承 ❌ 缺点: 不能传参,只适用于简单继承

5. 寄生组合继承(优化版,推荐)

核心思路: 组合继承的优化版本 ,避免了 Parent 被调用两次的问题。

js 复制代码
function Parent(name) {
  this.name = name
}
Parent.prototype.sayHello = function () {
  console.log('Hello from Parent')
}

function Child(name, age) {
  Parent.call(this, name)
  this.age = age
}
Child.prototype = Object.create(Parent.prototype) // 关键优化
Child.prototype.constructor = Child

const child = new Child('Rain', 18)
console.log(child.name, child.age) // "Rain", 18
child.sayHello() // "Hello from Parent"

优点: 1. 继承属性和方法,2. 只调用一次 Parent缺点: 代码略微复杂

相关推荐
leoZ23144 分钟前
第 6 篇:SchemaForm 渲染器核心实现
前端·javascript·vue.js·人工智能·神经网络·机器学习·自然语言处理
CoderYanger1 小时前
前端基础——JavaScript(基础语法)(下篇)
java·开发语言·前端·javascript·程序人生·面试·职场和发展
还是大剑师兰特1 小时前
vue项目浏览器版本判别,低于IE11跳转到新页面
前端·javascript·vue.js
计算机魔术师1 小时前
奥尔特曼致歉 GPT-6 Astra 发布混乱,现已面向所有 Plus / Pro 等用户推出
前端
落樱弥城1 小时前
RHI 设计考量:不同 API 差异分析
服务器·前端·性能优化
热心网友俣先生2 小时前
2026国赛C题:五年命题规律与预测
java·c语言·前端·数学建模
BestHeaker3 小时前
跨企业接口对接:IQDS / CPK 数据解析与协作避坑指南(五)
java·服务器·前端
青花锁4 小时前
OpenAI Function Calling 完全指南:让大模型安全调用你的业务系统
前端·安全·functioncalling
俊昭喜喜里4 小时前
C#中的func<>
java·前端·c#
BillKu4 小时前
vue3 字符串排序 localeCompare,确保排序为 “B01“, “B10“, “B2“
前端·javascript·vue.js