iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 25
0
Modern Web

用 JavaScript 打造全端產品的入門學習筆記系列 第 25

JavaScript 物件導向白話文筆記——全端開發者內功 I

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

淺談物件導向程式設計 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

Number prototype

  • 而它的 constructor function 長這樣:

Number constructor

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

 


閱讀更多

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


上一篇
用 MongoDB 及 Mongoose Model.Populate() 實作關連式資料庫——全端刻意練習 III
下一篇
手刻登入功能:帳密檢查、保存登入狀態——全端刻意練習 IV
系列文
用 JavaScript 打造全端產品的入門學習筆記30

尚未有邦友留言

立即登入留言