2020-05-21

JS的继承方式

1、原型链继承

function SuperType(type) {
  this.property = true
  this.colors = ['red', 'blue']
  this.type = type
}
SuperType.prototype.getSuperValue = function() {
  console.log(this.property)
}

function SubType(type) {
  this.subproperty = false
  this.subtype = type
}

// 如果这里是 SubType.prototype = SuperType.prototype
// 则 this.property 值为 undefined
SubType.prototype = new SuperType('super')

SubType.prototype.getSubValue = function() {
  console.log(this.subproperty)
}

const instance = new SubType('one')

instance.getSuperValue()
instance.getSubValue()

console.log(instance instanceof SubType, instance.constructor)
console.log(instance instanceof SuperType)

instance.colors.push('black')
console.log(instance.colors, instance.type, instance.subtype)

const instance2 = new SubType('two')
console.log(instance2.colors, instance2.type, instance2.subtype)

// 所有实例的 colors 属性指向同一个对象，一改全改
// 如果父类有参数，没法带进去

2、构造函数继承

function SuperType(type) {
  this.property = true
  this.colors = ['red', 'blue']
  this.type = type
}
SuperType.prototype.getSuperValue = function() {
  console.log(this.property)
}

function SubType(type) {
  SuperType.call(this, type)
  // 为了确保不被父级的属性覆盖，可以在这之后再赋值子类的属性
  this.subproperty = true
}

const instance1 = new SubType('one')

console.log(instance1 instanceof SubType, instance1.constructor)
console.log(instance1 instanceof SuperType, instance1.type)

// 没有用到原型的方法属性
// instance1.getSuperValue()

instance1.colors.push('black')
console.log(instance1.colors)

const instance2 = new SubType('two')
console.log(instance2.colors, instance2.type)

3、组合继承（原型链继承 + 构造函数继承）

function SuperType(type) {
  this.property = 'true111'
  this.colors = ['red', 'blue']
  this.type = type
}
SuperType.prototype.getSuperValue = function() {
  console.log(this.property)
}

function SubType(type) {
  SuperType.call(this, type) // 调用一次
  // 为了确保不被父级的属性覆盖，可以在这之后再赋值子类的属性
  this.subproperty = true
}

SubType.prototype = new SuperType() // 调用两次

// 如果没有这一步，最终顺着父类的原型链指向父类SuperType
SubType.prototype.constructor = SubType

const instance1 = new SubType('one')

console.log(instance1 instanceof SubType, instance1.constructor)
console.log(instance1 instanceof SuperType, instance1.type)

instance1.getSuperValue()

instance1.colors.push('black')
console.log(instance1.colors)

const instance2 = new SubType('two')
console.log(instance2.colors, instance2.type)

4、原型式继承

// 缺点：引用类型属性依然是共享的
function object(o) {
  function F(){}
  F.prototype = o
  return new F()
}

const person = {
  name: 'xiaoming',
  colors: ['1', '2']
}

const p1 = object(person)
const p2 = object(person)

console.log(p1.colors, p2.colors)

p2.colors.push('3')

console.log(p1.colors, p2.colors)

// 等同于
const p3 = Object.create(person, {
  name1: {
    value: 'xiaohong'
  }
})

console.log(p1, p2, p3, p3.name)

5、寄生式继承

function object(o) {
  function F(){}
  F.prototype = o
  return new F()
}

// 包了一层，定义了个方法增强对象，
// 缺点是函数没法复用，引用类型属性依然是共享的
function createObject(o) {
  const clone = object(o)
  clone.say = function() {
    console.log(this.colors)
  }
  return clone
}

const person = {
  name: 'xiaoming',
  colors: ['1', '2']
}

const p1 = createObject(person)
const p2 = createObject(person)

console.log(p1.colors, p2.colors)

p2.colors.push('3')

console.log(p1.colors, p2.colors)

p2.say()

6、寄生式组合继承

function SuperType(type) {
  this.name = 'true111'
  this.colors = ['red', 'blue']
}
SuperType.prototype.getSuperValue = function() {
  console.log(this.colors)
}

function SubType(name, age) {
  SuperType.call(this, name) // 调用一次
  // 为了确保不被父级的属性覆盖，可以在这之后再赋值子类的属性
  this.age = age
}

SubType.prototype = new SuperType() // 调用两次

// 如果没有这一步，最终顺着父类的原型链指向父类SuperType
SubType.prototype.constructor = SubType

const s1 = new SubType('saaa', 18)
const s2 = new SubType('sbbb', 19)

console.log('~1~', s1, s2)

s2.colors.push('yellow')

console.log('~2~', s1, s2)

// 这样每个 SubType 实例都有两组 name 和 colors，
// 一组是自身属性下，一组是原型链指向父类实例的

function inherit(newType, superType) {
  newType.prototype = Object.create(superType.prototype)
  newType.prototype.constructor = newType
}

function NewType(name, age) {
  SuperType.call(this, name) // 调用一次
  // 为了确保不被父级的属性覆盖，可以在这之后再赋值子类的属性
  this.age = age
}

inherit(NewType, SuperType)

const n1 = new NewType('nbbb', 20)
const n2 = new NewType('nccc', 21)

console.log('~3~', n1, n2, n1.constructor)

n1.colors.push('yellow')

console.log('~4~', n1, n2)