web学习 -- JavaScript Prototype（原型）

引入

创建对象

let animal = {}
animal.name = 'Leo'
animal.energy = 10
 
animal.eat = function (amount) {
  console.log(`${this.name} is eating.`)
  this.energy += amount
}
 
animal.sleep = function (length) {
  console.log(`${this.name} is sleeping.`)
  this.energy += length
}
 
animal.play = function (length) {
  console.log(`${this.name} is playing.`)
  this.energy -= length
}

函数实例化（Functional Instantiation）

function Animal (name, energy) {
  let animal = {}
  animal.name = name
  animal.energy = energy
 
  animal.eat = function (amount) {
    console.log(`${this.name} is eating.`)
    this.energy += amount
  }
 
  animal.sleep = function (length) {
    console.log(`${this.name} is sleeping.`)
    this.energy += length
  }
 
  animal.play = function (length) {
    console.log(`${this.name} is playing.`)
    this.energy -= length
  }
 
  return animal
}
 
const leo = Animal('Leo', 7)
const snoop = Animal('Snoop', 10)

共享方法的函数实例化（Functional Instantiation with Shared Methods ）

const animalMethods = {
  eat(amount) {
    console.log(`${this.name} is eating.`)
    this.energy += amount
  },
  sleep(length) {
    console.log(`${this.name} is sleeping.`)
    this.energy += length
  },
  play(length) {
    console.log(`${this.name} is playing.`)
    this.energy -= length
  }
}
 
function Animal (name, energy) {
  let animal = {}
  animal.name = name
  animal.energy = energy
  animal.eat = animalMethods.eat
  animal.sleep = animalMethods.sleep
  animal.play = animalMethods.play
 
  return animal
}
 
const leo = Animal('Leo', 7)
const snoop = Animal('Snoop', 10)

注：通过将共享方法移动到它们自己的对象并在 Animal 函数中引用该对象

Object.create

Object.create 允许创建一个对象，该对象将在查找失败时委托给另一个对象。

const parent = {
  name: 'Stacey',
  age: 35,
  heritage: 'Irish'
}
 
const child = Object.create(parent)
child.name = 'Ryan'
child.age = 7
 
console.log(child.name) // Ryan
console.log(child.age) // 7
console.log(child.heritage) // Irish

注：因为 child 是通过 Object.create(parent) 创建的，所以每当在 child 中查找属性失败时，JavaScript 就会将该查找委托给 parent 对象。这意味着即使 child 没有 heritage 属性，当你查找 child.heritage 时你会得到 parent 的heritage 属性，即 Irish。

使用共享方法和Object.create进行函数实例化（Functional Instantiation with Shared Methods and Object.create）

const animalMethods = {
  eat(amount) {
    console.log(`${this.name} is eating.`)
    this.energy += amount
  },
  sleep(length) {
    console.log(`${this.name} is sleeping.`)
    this.energy += length
  },
  play(length) {
    console.log(`${this.name} is playing.`)
    this.energy -= length
  }
}
 
function Animal (name, energy) {
  let animal = Object.create(animalMethods)
  animal.name = name
  animal.energy = energy
 
  return animal
}
 
const leo = Animal('Leo', 7)
const snoop = Animal('Snoop', 10)
 
leo.eat(10)
snoop.play(5)

注：当调用 leo.eat 时，JavaScript 会在 leo 对象上查找 eat 方法。 这个查找将失败，因为使用了 Object.create，它将委托给 animalMethods 对象，然后在这里将找到 eat 方法

原型

JavaScript 中的每个函数都有一个引用对象的 prototype 属性

function doThing () {}
console.log(doThing.prototype) // {}

原型实例化（Prototypal Instantiation）

function Animal (name, energy) {
  let animal = Object.create(Animal.prototype)
  animal.name = name
  animal.energy = energy
 
  return animal
}
 
Animal.prototype.eat = function (amount) {
  console.log(`${this.name} is eating.`)
  this.energy += amount
}
 
Animal.prototype.sleep = function (length) {
  console.log(`${this.name} is sleeping.`)
  this.energy += length
}
 
Animal.prototype.play = function (length) {
  console.log(`${this.name} is playing.`)
  this.energy -= length
}
 
const leo = Animal('Leo', 7)
const snoop = Animal('Snoop', 10)
 
leo.eat(10)
snoop.play(5)

new 关键字创建对象

使用new关键字，let animal = Object.create(Animal.prototype)，return animal是隐式（引擎）完成的，创建的对象称为this。

function Animal (name, energy) {
  // const this = Object.create(Animal.prototype)
 
  this.name = name
  this.energy = energy
 
  // return this
}
 
const leo = new Animal('Leo', 7)
const snoop = new Animal('Snoop', 10)

绑定方法

function Animal (name, energy) {
  this.name = name
  this.energy = energy
}
 
Animal.prototype.eat = function (amount) {
  console.log(`${this.name} is eating.`)
  this.energy += amount
}
 
Animal.prototype.sleep = function (length) {
  console.log(`${this.name} is sleeping.`)
  this.energy += length
}
 
Animal.prototype.play = function (length) {
  console.log(`${this.name} is playing.`)
  this.energy -= length
}
 
const leo = new Animal('Leo', 7)
const snoop = new Animal('Snoop', 10)

伪类实例化（Pseudoclassical Instantiation）

function Animal (name, energy) {
  this.name = name
  this.energy = energy
}
 
const leo = Animal('Leo', 7)
console.log(leo) // undefined

注：使用 new 关键字调用构造函数。如果在调用函数时不使用 new ，则该对象永远不会创建，也不会隐式返回

class 语法糖创建对象

class Animal {
  constructor(name, energy) {
    this.name = name
    this.energy = energy
  }
  eat(amount) {
    console.log(`${this.name} is eating.`)
    this.energy += amount
  }
  sleep(length) {
    console.log(`${this.name} is sleeping.`)
    this.energy += length
  }
  play(length) {
    console.log(`${this.name} is playing.`)
    this.energy -= length
  }
}
 
const leo = new Animal('Leo', 7)
const snoop = new Animal('Snoop', 10)