淺談物件導向程式設計 Object-oriented programming

在程式中，我們常以物件表達「真實世界的概念」：

1. 屬性：靜態的資料，用於描述物件的狀態
2. 方法：物件的功能（函式），或說物件的行為

以蝙蝠俠為例：

const hero = {
  id: 'Batman',
  name: ['Bruce', 'Wayne'],
  gender: 'Male',
  age: 41,
  greet: function () {
    console.log(`Hello! I am ${this.name[0]}`)
  }, // this 代表「誰呼叫了這個函式」，在這指 hero
  run: function () {
    return 'run!!!'
  },
  punch: function () {
    return 'One Punch!!!'
  },
  beat: function () {
    return 'Beat it!!!'
  }
}

// 方法
hero.greet()
hero.run()
hero.punch()
hero.beat()

但如果每個英雄都要建構一個物件，那程式碼將龐雜到難以管理。
所以 JavaScript 以 物件導向程式設計 Object-oriented programming（簡稱OOP），讓我們可以新增「Constructor Function 建構式函式」當作物件範本，再以物件範本新增多個「實例（instance）」。

Constructor Function 建構式函式

繼續以超級英雄當例子，新增一個 Constructor Function（慣例以大寫開頭）：

function Hero (name, title, studio) {
  this.name = name
  this.title = title
  this.studio = studio
}

再透過 Hero 來產生多個實例（instance）：

let onePunchMan = new Hero('Saitama', 'One-Punch Man', 'Madhouse')

let batman = new Hero('Bruce Wayne', 'Dark Knight', 'DC')

let wolverine = new Hero('Logan', 'Wolverine', 'Marvel')

Constructor Prototype 物件原型

而為了不讓每個實例都包含相同的通用方法（method），而佔據大量記憶體；通常會把函式新增在原型（Prototype）中。

透過 Constructor.prototype 的方法，我們能新增函式在 prototype 中：

Hero.prototype.attack = function(skill) {
  console.log(`${this.title} attack with ${skill}`)
}

我們就能在實例（instance）中，使用其原型 Hero 的方法，稱之為繼承（inheritance）

onePunchMan.attack('Normal Punch.')
// One-Punch Man attack with Normal Punch.

onePunchMan.attack('Serious Punch!')
// One-Punch Man attack with Serious Punch!

JavaScript 中的物件導向程式設計

其實整個 JavaScript 就是以物件導向來設計的！在開頭的概念圖中，以 let num = 7 這個變數為例，來探究 JS 中各種型別的使用：

• num 的 prototype 就是 Number

• 而它的 constructor function 長這樣：

• Number 又源自 Object，Object 就沒有上一層的原型了 null

閱讀更多

關於本系列更多內容及導讀，請閱讀作者於 Medium 個人專欄 【無限賽局玩家 Infinite Gamer | Publication – 】 上的文章 《用 JavaScript 打造全端產品的入門學習筆記》系列指南。