js继承 - 原型式继承、寄生式继承

原型式继承

基本思路：将需要继承的属性和方法放到一个对象上，然后将这个对象放到原型上。
怎么做呢？看下例子：

const util = {
  name: 'util',
  wealth: ['house', 'car']
}
function utilFn(util) {
  function fn(){}
  // 这里可以对传入的util进行修改，比如：
  util.weight = '80'
  // 这一步就是将对象放到原型上了
  fn.prototype = util
  // 最后返回实例，这样后面通过这个方法生成的都将是fn的实例，也自然继承了util
  // 这样做自然会带来一个问题，就是引用类型的值会被所有的实例共享，看后面的打印就知道了
  return new fn()
}

const p1 = utilFn(util)
p1.name = 'p1'
p1.wealth.push('$')
const p2 = utilFn(util)
p2.name = 'p2'
p2.wealth.push('￥')
console.log(p1, p2)

utilFn函数也可以用Object.create()替代：

const util = {
  name: 'util',
  wealth: ['house', 'car']
}
const p1 = Object.create(util, {weight: {value: '80'}})
p1.name = 'p1'
p1.wealth.push('$')
const p2 = Object.create(util, {weight: {value: '80'}})
p2.name = 'p2'
p2.wealth.push('￥')
console.log(p1, p2)

寄生式继承

基本思路：同样是将需要继承的属性和方法放到一个对象上，然后通过一个函数对它进行个性化修改，最后返回修改后的对象

const util = {
  name: 'util',
  wealth: ['house', 'car']
}
function utilFn(util) {
  return Object.create(util, {weight: {value: '80'}})
}
const p1 = utilFn(util)
p1.name = 'p1'
p1.wealth.push('$')
const p2 = utilFn(util)
p2.name = 'p2'
p2.wealth.push('￥')
console.log(p1, p2)

utilFn也可以不用Object.create，其他任何可以做到修改util并返回新对象的方式都可以，比如：

function utilFn(util) {
 const clone = Object(util)
 clone.weight = '80'
 return clone
}

再比如：

function utilFn(util) {
  const clone = JSON.parse(JSON.stringify(util))
  clone.weight = '80'
  return clone
}

为什么将这两种模式放一起，因为他们的思路差不多。

THE END