JavaScript的ES5实现继承的4种常用方法小结

更新时间：2024年03月24日 14:25:30 作者：小甘不想干

继承是面向对象软件技术当中的一个概念,这篇文章主要为大家详细介绍了JavaScript ES5实现继承的4种常用方法,感兴趣的小伙伴可以了解一下

前言

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

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

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

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

ES5实现的四种方式

1. 原型链继承

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

// 父类
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实例改变了它，那么会影响所有的实例

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，让父类的属性和方法都挂在子类上，这样即避免每一个子类实例共享一个原型实例，并且这样也可以向父类传参

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

缺点

不能访问父类的原型

console.log(student.getName) // undefined

3. 组合式继承

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

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

缺点

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

4. 寄生式组合继承

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

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，但它也存在缺点就是不能继承到父类原型链上的属性和方法
后来就有了组合式继承，是上面两者的结合，问题就是每次都会执行两次父类构造函数
最后就有了寄生式组合继承

到此这篇关于JavaScript的ES5实现继承的4种常用方法小结的文章就介绍到这了,更多相关JavaScript ES5继承内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！

您可能感兴趣的文章:

JS也玩OO继承
JS也玩OO继承...
2007-01-01
Javascript图片上传前的本地预览实例
图片的上传预览功能主要用于图片上传前的一个效果的预览，这篇文章主要介绍了Javascript图片上传前的本地预览实例,需要的朋友可以参考下
2014-06-06
javascript web页面刷新的方法收集
javascript refresh page，页面刷新实现代码。
2009-07-07
JavaScript计算正方形面积
这篇文章主要为大家详细介绍了JavaScript计算正方形面积，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
js常用函数push()、pop()、shift()、unshift()、slice()和splice()等详解
这篇文章主要给大家介绍了关于js常用函数push()、pop()、shift()、unshift()、slice()和splice()等的相关资料,js中数组操作函数还是非常多的,今天忽然想到来总结一下,也算是温故而知新吧,需要的朋友可以参考下
2023-11-11
HTML+JS实现在线朗读器
这篇文章主要介绍了利用HTML和JavaScript制作一个朗读器，可以跟着一起念着读，文中的示例代码讲解详细，感兴趣的小伙伴可以学习一下
2022-02-02
BootStrap导航栏问题记录
这篇文章主要介绍了BootStrap导航栏问题记录,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-07-07
JavaScript实现时间表动态效果
这篇文章主要为大家详细介绍了JavaScript实现时间表动态效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
JavaScript获取网页的宽高及如何兼容详解
这篇文章主要给大家介绍了关于JavaScript获取网页的宽高及如何兼容的相关资料，主要介绍了三个方式，分别是window.innerWidth / window.innerHeight、document.documentElement.clientWidth以及混杂模式/怪异模式下的宽高的获取，需要的朋友可以参考下
2021-05-05
JavaScript实现页面无操作倒计时退出
这篇文章主要为大家详细介绍了JavaScript实现页面无操作倒计时退出,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10