技術標籤：javaScript

原型式繼承

基本思路：將需要繼承的屬性和方法放到一個物件上，然後將這個物件放到原型上。
怎麼做呢？看下例子：

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