# 【前端筆記】物件概念
###### tags: `JavaScript` `Object` `物件` `筆記`

本文中我將嘗試以簡單的方式介紹JavaScript的物件概念，涵蓋物件導向程式設計<span id = "a"></span>[¹](#1)、物件、屬性、類別、實例、建構函數等主題。

---

### 物件是什麼？

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

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

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

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

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

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

const 履歷表 = {

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

};

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

你可以嘗試將上面這段程式碼貼到任何可以執行JavaScript的地方<span id = "b"></span>[²](#2)，執行起來如果長得像下圖這樣表示你成功了！

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

---

### 註腳

<span id="1"></span>¹^{[^](#a)} 為求方便，本文用語以臺灣稱呼為主。若有各地用語差異過大之處，將附上英文提供對照。

<iframe src='https://sheetsu.com/tables/aee1d4e060' allowfullscreen height='350px' width='100%' frameBorder='0'></iframe>

*常見用語對照表*

<span id="2"></span>²^{[^](#b)} 比如說目前主流的瀏覽器中，你可以按下`F12`鍵（Chrome、Edge、Firefox）、`Ctrl＋Shift＋J`鍵（Chrome、Edge、Firefox、Opera）或`CMD＋Option＋C`鍵（Safari）開啟「開發人員工具」，並點擊頁籤中的「主控臺」，下方的輸入框可以做為執行JavaScript的場所。當然網路上還有很多可以執行JavaScript的網站，像是[Codepen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Playcode.io](https://playcode.io/javascript)、[Programiz](https://www.programiz.com/javascript/online-compiler/)之類的網站。

---

### 參考資料

[Object Basics](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics) by MDN

[Working with Objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects) by MDN

[Object-oriented Programming](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_programming) by MDN

[Classes in JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript) by MDN