JavaScript的ES5实现继承方法

前言

继承是面向对象软件技术当中的一个概念。如果一个类别B"继承自"另一个类别A,就把这个B称为"A的子类",而把A称为"B的父类"也可以称"A是B的超类"。

继承的优点是可以使得子类具有父类的属性和方法,而不需要再次编写相同的代码,在子类继承父类的同时,可以重新定义某些属性,并重写某些方法,即覆盖父类的原有属性和方法,使其获得与父类不同的功能。

JavaScript实现面向对象编程的方式与传统的面向对象语言有所不同,它的面向对象特性主要基于原型和原型链机制,而不是基于类(尽管ES6引入了class关键字,但只是语法糖而已,底层依旧是基于原型的)。

接下来重点说说ES5的4种常用继承方法

ES5实现的四种方式

1. 原型链继承

原型链继承其实就是让子类的原型对象指向父类实例,当子类实例找不到对应的属性和方法时,就会往它的原型上去找,从而实现对父类的属性和方法的继承

js 复制代码
// 父类
function Person() {
  this.name = 'gan'
}

Person.prototype.getName = function () {
  return this.name
}

// 子类
function Student() { }

Student.prototype = new Person()

// 根据原型链的规则,顺便绑定constructor 不影响继承
Student.prototype.constructor = Student

const student = new Student()

console.log(student.name) // gan

console.log(student.getName()) // gan

缺点

  1. 所有的Student实例都指向一个Person实例,这样的话如果Person有一个引用类型的属性,有一个student1实例改变了它,那么会影响所有的实例
js 复制代码
function Person() {
  this.hobby = ['篮球', '足球']
}

function Student() { }

Student.prototype = new Person()

const student1 = new Student()
const student2 = new Student()

student1.hobby.push('排球')
console.log(student1.hobby) // [ '篮球', '足球', '排球' ]
console.log(student2.hobby) // [ '篮球', '足球', '排球' ]

2.子类实例不能向父类构造函数传参,也就是没有super()功能

2. 构造函数继承

构造函数继承就是在子类的构造函数中执行父类的构造函数,为父类构造函数绑定子类的this,让父类的属性和方法都挂在子类上,这样即避免每一个子类实例共享一个原型实例,并且这样也可以向父类传参

js 复制代码
function Person() {
  this.name = 'gan'
}

Person.prototype.getName = function () {
  return this.name
}

function Student() {
  Person.apply(this, arguments)
}

const student = new Student()
console.log(student.name) // gan

缺点

  1. 不能访问父类的原型
js 复制代码
console.log(student.getName) // undefined

3. 组合式继承

组合式继承其实就是结合了原型链继承和构造函数继承两种方式

js 复制代码
function Person() {
  this.name = 'gan'
}

Person.prototype.getName = function () {
  return this.name
}

function Student() {
  Person.apply(this, arguments)
}

Student.prototype = new Person()

Student.prototype.constructor = Student

const student = new Student()
console.log(student.getName()) // gan

缺点

  1. 每次创建子类实例时需要创建两遍父类构造函数(Person.apply和new Person),原型中会存在两份相同的属性和方法,虽然不影响继承,但是不够优雅

4. 寄生式组合继承

解决了执行两次父类构造函数的问题,将指向父类实例改为指向父类原型

js 复制代码
function Person() {
  this.name = 'gan'

}

Person.prototype.getName = function () {
  return this.name
}

function Student() {
  // 构造函数继承
  Person.apply(this, arguments)
}

// Student.prototype = new Person()
Student.prototype = Object.create(Person.prototype)

Student.prototype.constructor = Student

const student = new Student()
console.log(student.getName()) // gan

这种方法是目前最优的办法

总结

  • 最开始说到继承,我们应该先想到的是原型链继承,子类的原型对象指向父类实例,但是它的缺点在于子类实例继承父类引用类型时出现了问题以及实例不能向父类传参的问题
  • 接着就是构造函数继承,在子类的构造函数中执行父类的构造函数,为父类构造函数绑定子类的this,但它也存在缺点就是不能继承到父类原型链上的属性和方法
  • 后来就有了组合式继承,是上面两者的结合,问题就是每次都会执行两次父类构造函数
  • 最后就有了寄生式组合继承
相关推荐
LSL666_13 分钟前
4 jQuery、JavaScript 作用域、闭包与 DOM 事件绑定
前端·javascript·html
小飞侠在吗33 分钟前
vue computed 和 watch
前端·javascript·vue.js
诸葛老刘44 分钟前
next.js 框架中的约定的特殊参数名称
开发语言·javascript·ecmascript
coding随想1 小时前
掌控选区的终极武器:getSelection API的深度解析与实战应用
java·前端·javascript
沐风。562 小时前
Object方法
开发语言·前端·javascript
JS_GGbond2 小时前
JavaScript入门学习路线图
开发语言·javascript·学习
BD_Marathon3 小时前
【JavaWeb】JS_JSON在客户端的使用
开发语言·javascript·json
仙人掌一号3 小时前
梳理SPA项目Router原理和运行机制 [共2500字-阅读时长10min]
前端·javascript·react.js
粥里有勺糖3 小时前
视野修炼-技术周刊第128期 | Bun 被收购
前端·javascript·github
用户12039112947263 小时前
彻底搞定大模型流式输出:从二进制碎块到“嘚嘚嘚”打字机效果,让底层逻辑飞起来
前端·javascript·面试