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

前言

继承是面向对象软件技术当中的一个概念。如果一个类别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

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