Day03 JavaScript Object(物件）
今天我們會繼續用CodePen。
為何需要Object（物件）
在開始介紹object之前，我們先來討論object為何需要存在。
想像我們有一筆關於網站使用者的資料，裡面包含使用者名稱、年紀，還有sayHelloToUser()這個function。
我們可以逐個定義、宣告這些資料。
上面寫的程式完全是可運行的，但很明顯不太好管理。這些變數除了相似的名字，在程式上他們毫無關聯。假設有個誰在中間又多寫了幾行，或是不小心弄亂了順序，這些程式碼會變得更混亂、更難處理。就是電腦能夠理解沒錯，但人容易看不懂，這通常都是個大問題。
所以，為了讓程式碼更容易被人看懂，讓你的合作對象不抓狂，object（物件）出現了。object基本上是一種資料的容器，裡面可以裝非常多不同種類的資料，把分散的整理到容器裡面就容易管理多了，類似居家收納的概念。
宣告Object
Property（屬性）
object必須由{}括起來，或是換句話說，我們能透過{}來宣告JavaScript object。但要注意，雖然都有{}，object跟function的樣子很不一樣。
name, age在object裡，被稱為object的property（屬性）。而:後的則是property的value(值)，並且兩個property之間以,連接。
觀察object可以看見它的架構是：
let object = {}
（順帶一提，這是function的架構：）
function 名稱() {}
以上面的例子來說，object的一個好處就是，我們能很清楚的知道這些屬性都跟user有關，不需要更多人為的判斷了。
Method
另外，object的屬性可以是任意的，可以是boolean、number、string，也可以是function。
object內，由property（屬性）: value（值）組成，不同的property由,分隔。
注意function的宣告跟之前的有稍微不同，省略了關鍵字function。
object內的function被稱為method。本質上跟function是一樣的。
所以總結來說，object內會有兩種內容 — property和method。
這裡的程式碼可能會開始讓人覺得混亂，好多不同的{}。
只要特別注意，最外層的{}代表這是一個object，而sayHello的{}則是function的一部分。
存取Object Property/Method
以.存取
還記得我們之前做過用document.title存取Google網站的標題嗎？
.就是用來存取object中property的關鍵。
以剛才的userobject為例：
執行object內的method也是用這個關鍵字：
以[]存取
除了用.存取property之外，也常見用[]和property的名稱來存取。
為什麼有這種多此一舉？
想像我們想存取的property是一個變數，我們可能會很直覺得把它放在.後面。
但這樣會變成在object裡搜尋'key'這個string，我們會失去使用變數的便利性。
這會回傳undefined，因為object裡根本沒有'key'，這個property。
要解決這個問題，我們就必須用[]來存取object裡的內容。
相信大家能慢慢理解為何object是很實用的存在了。當user的資料跟有關的指令都被包含在userobject內，我們可以更容易的管理、理解之前自己或別人寫過的code。比起散亂在別的程式碼中，這些跟user有關的內容被裝進object容器整理了。
Object內的Object
例如我們想紀錄使用者的三餐，我們可能也會需要object能統一管理的方便性，宣告成object。
這時候就出現了object裡面還有另一個object的情況。其實也不難理解，你想像無印良品店裡展示的收納盒裡面裝著另一個小盒子。
如此一來可以很方便地用meals這個object管理三餐，也能很看到使用者真的是吃了不少吐司。
最後可以透過連續使用.、[]一層又一層地找到資料：
這兩行指令基本上是一樣的。
動手嘗試
透過瀏覽器內建的document這個object，我們可以監聽畫面上的event（事件），像是滑鼠點擊、按下鍵盤等。
我們要存取的function（或是正確來說是method）叫做addEventListener()。它可以為畫面加上事件的監聽。在document後面加上.來存取addEventListener()。
他需要的參數有兩個，第一個是事件名稱，第二個是事件發生時要執行的function。
我們可以嘗試監聽click（滑鼠點擊）事件，並且執行簡單的alert。
注意第二個參數，afterClicked後面沒有()，因為我們沒有要立刻呼叫這個function。只是給addEventListener()一個參考，讓他知道事件發生後要做什麼。
正如同之前在function單元提到的，我們只給它螺絲起子，它有需要的時候會用，不是在它面前開始用螺絲起子。
執行後，點擊畫面中右邊預覽處，就可以看見成功監聽了click event，跳出alert。
小結
今天我們認識了object作為內建的資料容器，以{}宣告，以.、[]存取，並且也使用了瀏覽器內建的document object監聽畫面上的事件。
明天我們會討論JavaScript另一個重要的資料容器，array（陣列）。
Resource
今日Codepen
Credits
- Learn JavaScript: Full-Stack from Scratch — Brad Schiff
- Web Programming — Rick Huang
- https://openprocessing.org/sketch/1561900/ — Chang Wen Han
- https://chartogne-taillet.com/fr — Bruno Simon
- https://www.apple.com/apple-vision-pro/ — Apple
- https://claude.ai — Anthropic
關於我
我是Erkin, 一個網站開發者。
有任何疑問或是想勘誤的話歡迎聯繫。
你可能也想看
