JavaScript原型初學(xué)者指南

Benedict Evans 發(fā)布于2019-08-29 17:07 / 2417人閱讀

摘要：創(chuàng)建對象的最常用方法是使用花括號，并使用點(diǎn)表示法向?qū)ο筇砑訉傩院头椒ā．?dāng)然，下一步是將邏輯封裝在我們可以在需要創(chuàng)建新動物時(shí)調(diào)用的函數(shù)內(nèi)部。我們將這種模式稱為，我們將函數(shù)本身稱為構(gòu)造函數(shù)，因?yàn)樗?fù)責(zé)構(gòu)造一個新對象。

視頻Video
https://www.youtube.com/watch...

前言

如果不好好的學(xué)習(xí)對象，你就無法在JavaScript中獲得很大的成就。它們幾乎是JavaScript編程語言的每個方面的基礎(chǔ)。在這篇文章中，您將了解用于實(shí)例化新對象的各種模式，并且這樣做，您將逐漸深入了解JavaScript的原型。

對象是鍵/值對。創(chuàng)建對象的最常用方法是使用花括號{}，并使用點(diǎn)表示法向?qū)ο筇砑訉傩院头椒ā?/p>

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
}

如上代碼，在我們的應(yīng)用程序中，我們需要創(chuàng)建多個動物。當(dāng)然，下一步是將邏輯封裝在我們可以在需要創(chuàng)建新動物時(shí)調(diào)用的函數(shù)內(nèi)部。我們將這種模式稱為Functional Instantiation，我們將函數(shù)本身稱為“構(gòu)造函數(shù)”，因?yàn)樗?fù)責(zé)“構(gòu)造”一個??新對象。

功能實(shí)例化

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)

現(xiàn)在，每當(dāng)我們想要創(chuàng)造一種新動物（或者更廣泛地說是一種新的“實(shí)例”）時(shí)，我們所要做的就是調(diào)用我們的動物功能，將動物的名字和能量水平傳遞給它。這非常有效，而且非常簡單。但是，你能發(fā)現(xiàn)這種模式的弱點(diǎn)嗎？最大的和我們試圖解決的問題與三種方法有關(guān) - 吃飯，睡覺和玩耍。這些方法中的每一種都不僅是動態(tài)的，而且它們也是完全通用的。這意味著沒有理由重新創(chuàng)建這些方法，正如我們在創(chuàng)建新動物時(shí)所做的那樣。你能想到一個解決方案嗎？如果不是每次創(chuàng)建新動物時(shí)重新創(chuàng)建這些方法，我們將它們移動到自己的對象然后我們可以讓每個動物引用該對象，該怎么辦？我們可以將這種模式稱為功能實(shí)例化與共享方法