首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript ES5继承

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

2024-03-24 14:25:31 作者：小甘不想干

继承是面向对象软件技术当中的一个概念,这篇文章主要为大家详细介绍了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继承内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！