js 实现类的继承的5种方式

什么是面向对象

面向对象是一种思想，是基于面向过程而言的，就是说面向对象是将功能等通过对象来实现，将功能封装进对象之中，让对象去实现具体的细节；这种思想是将数据作为第一位，这是对数据一种优化，操作起来更 加的方便，简化了过程。
Js 本身是没有 class 类型的，但是每个函数都有一个 prototype 属性， prototype 指向一个对象，当函数作为构造函数时，prototype 就起到 类似于 class 的作用。
面向对象有三个特点：

• 封装（隐藏对象的属性和实现细节，对外提供公 共访问方式）
• 继承（提高代码复用性，继承是多态的前提）
• 多态（是父类或接口定义的引用变量可以指向子类或具体实现类的实例对象）

类与实例

类的声明以及生成实例的方法

// 类的声明
function Animal(name){
  this.name = name
}
// ES6声明类
class Animal2 {
  constructor(name) {
    this.name = name
  }
}
// 实例化方法是一样的
var mao = new Animal("miao")
var wang = new Animal2("wang")  // 如果没有参数，括号可以不要

创建类的方式

1. 使用function加this

function Animal(name) {
  this.name = name
}

2. 原型方法
   用 prototype 和 this 关键字

3. 使用Object.create()方法构造

类与继承

如何实现继承（继承的几种方式），以及其优缺点

1. 借助构造函数继承
   在子构造函数内调用父类构造函数，并将this指向自身
   缺点：只支持部分继承，无法继承父类的原型对象上的属性和方法

function Parent1() {
  this.name = 'parent1'
}
Parent1.prototype.say = function() {
  console.log('hello')
}
Parent1.prototype.age = 18
function Child1() {
  Parent1.call(this)  // 将父级的构造函数的this指向当前child对象
  this.type = 'child1'
}
const child1 = new Child1
console.log("构造函数：", child1) // {name: "parent1", type: "child1"}，没有say和age属性
// 缺点：只支持部分继承，无法继承父类的原型对象上的属性和方法 

2. 借助原型链实现继承
   将子类的原型对象指向父类的实例： Child.prototype = new Parent()
   缺点：当修改其中一个实例对象的引用对象时，另一个实例对象的引用对象值也跟着改变，因为他们指向的是同一个原型对象

function Parent2() {
  this.name = 'Parent2'
  this.play = [1, 2, 3]
}
function Child2() {
  this.type = 'child2'
}
// new Child2().__proto__ = Child2.prototype
// Child2.prototype = new Parent2()
// new Parent2().__proto__ = Parent2.prototype
Child2.prototype = new Parent2(); 
const child21 = new Child2()
const child22 = new Child2()
child21.play.push(4)
console.log(child21.play) // [1,2,3,4]
console.log(child22.play) // [1,2,3,4]
// 缺点：当修改其中一个实例对象的引用对象时，另一个实例对象的引用对象值也跟着改变，因为他们指向的是同一个原型对象

3. 组合方式，将方法1和方法2 结合使用
   缺点：
   • 父构造函数执行了2次，这是没有必要
   • 无法通过原型对象上的constructor属性来判断子类是通过哪个构造函数创建的

function Parent3() {
  this.name = "parent3"
  this.play = [1,2,3]
}
function Child3() {
  Parent3.call(this)  // 父构造函数执行1次
  this.type = 'child3'
}
Child3.prototype = new Parent3()  // 执行2次
const child31 = new Child3()
const child32 = new Child3()
child31.play.push(4)
console.log("child3:", child31)
console.log(child31.play) // [1,2,3,4]
console.log(child32.play) // [1,2,3]
console.log(Child3.prototype.constructor) // func Parent3

4. 对组合方式进一步优化
   针对缺点1：构造函数执行2次的问题，可以使用Object.create来拷贝原型Child.prototype = Object.create(Parent.prototype)

function Parent4() {
  this.name = "parent4"
  this.play = [1,2,3]
}
function Child4() {
  Parent4.call(this)  
  this.type = 'child4'
}
Child4.prototype = Object.create(Parent4.prototype)
const child41 = new Child4()
const child42 = new Child4()
child41.play.push(4)

console.log(child41.play) // [1,2,3,4]
console.log(child42.play) // [1,2,3]
console.log(child41.__proto__.constructor === Child4) // false
console.log(child41 instanceof Child4)  // true
console.log(child41.__proto__.constructor === Parent4) // true

5. 对组合方式更进一步优化
   针对缺点2，修改子类原型对象上的constructor，将其指向为自身：Child.prototype.constructor = Child

// 5. 组合方式的优化2
function Parent5() {
  this.name = "parent5"
  this.play = [1,2,3]
}
function Child5() {
  Parent5.call(this)  
  this.type = 'child5'
}
Child5.prototype = Object.create(Parent5.prototype)
Child5.prototype.constructor = Child5
const child51 = new Child5()
const child52 = new Child5()
child51.play.push(4)

console.log(child51.play) // [1,2,3,4]
console.log(child52.play) // [1,2,3]
console.log(child51.__proto__.constructor === Parent5)  // false
console.log(child51.__proto__.constructor === Child5)  // true