【前端筆記】物件概念

tags: `JavaScript` `Object` `物件` `筆記`

本文中我將嘗試以簡單的方式介紹JavaScript的物件概念，涵蓋物件導向程式設計¹、物件、屬性、類別、實例、建構函數等主題。

物件是什麼？

一言以蔽之，物件（Object）就是「一堆資料的集合體」。但是這完全無法解答你的疑惑，所以我們不妨想像以下例子：當我們求職及求學時，為了快速讓公司或學校的面試官了解我們，我們通常會填寫一張含有各項欄位的履歷表，開頭可能長得像是下圖這樣：

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

我仍然想不透為什麼沒有被錄取（誤）

如此一來，倘若面試官需要知道你的姓名、學歷、專長、手機號碼與長相，便可以透過這張履歷表來認識我們。事實上，這張履歷表就是一個物件，內含了許多可被存取的屬性（Property）！這或許聽起來很複雜，但是在JavaScript中要建立一個最基本的物件，你只需要短短的一行程式碼：

const 履歷表 = {}; // 建立一個叫做「履歷表」的物件。

但是這個「履歷表」目前空空如也，所以我們可以用鍵值對（key-value pair）的方式紀錄我們的履歷表的屬性：

// 下面的這個例子說明什麼是鍵值對：
// 「鍵」指的就是「欄位名稱」、「值」就是「欄位內容」。
// 在JavaScript中，我們會使用「鍵: 值」的模式紀錄屬性。

const 履歷表 = {

  姓名: '冒牌前端',
  學歷: '臺灣社會大學唬爛語文學系 學士\n中央山脈大學藝術系 碩士 肄業', // 「\n」是換行的意思。
  專長: '前端設計．平面設計．語言藝術',
  手機: '(+886) 0995-555-777',
  大頭貼: 'https://miro.medium.com/fit/c/132/132/1*RKNqeomu7tKLgpKYat8QtQ.png',

};

// 告訴電腦把「履歷表」呈現在主控臺給我們看。
console.log(履歷表);

你可以嘗試將上面這段程式碼貼到任何可以執行JavaScript的地方²，執行起來如果長得像下圖這樣表示你成功了！

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

左下角是執行的結果。可能因執行的介面而異，但至少要包含「履歷表」的每個屬性與值。

註腳

¹^{^} 為求方便，本文用語以臺灣稱呼為主。若有各地用語差異過大之處，將附上英文提供對照。

常見用語對照表

²^{^} 比如說目前主流的瀏覽器中，你可以按下F12鍵（Chrome、Edge、Firefox）、Ctrl＋Shift＋J鍵（Chrome、Edge、Firefox、Opera）或CMD＋Option＋C鍵（Safari）開啟「開發人員工具」，並點擊頁籤中的「主控臺」，下方的輸入框可以做為執行JavaScript的場所。當然網路上還有很多可以執行JavaScript的網站，像是Codepen、JSFiddle、Playcode.io、Programiz之類的網站。