[JS奇怪的世界]No.22 物件與「點」
前言
接下來是一個新的章節,物件與函數,許多課程都會將 JavaScript 中的這兩個東西當成不同的主題在教導,但這其實是一個天大的錯誤,why? 在其他的程式語言裡面這兩者確實是不同的主題,但 JavaScript 世界中這兩者就非常的有相關。
物件與「點」
前面章節有講過物件,(object)是一群「名稱/值」的組合,就像這樣 ↓
那為了方便解說所以我們來試著用不同的觀點來看物件吧,物件裡面通常可以有值、有物件及函數,就像這樣 ↓
但在物件裡面的函數,通常都被稱為方法(methods),那一般物件會如何找尋函數與物件 or 值呢?來看一下範例 ↓
1 | var person = new Object(); |
課程上先使用了 new
這個方法來建立一個新物件,接下來在記憶體就會知道它是一個物件,那該如何寫入資料呢?使用中括號運算子 ↓
1 | person['fistname'] = 'Tony'; |
這樣寫物件就可以參考它記憶體的位子寫入,這時候我們可以試著輸出 person
看看 ↓
1 | var person = new Object(); |
當然也可以透過變數的方式來取的物件資料 ↓
1 | var person = new Object(); |
結果與 console.log(person['fistname']);
相同,那物件取出來的方式也還有一種方式,那就是透過點(.)運算子來取得 person ↓
1 | var person = new Object(); |
這邊要注意點(.)運算子也是一個函數。
MDN文件中也有說明點運算子的優先性可是第二高的呢!
所以點運算子真正的運作模式會像這樣,這邊的原理與語法解析器有關係,當語法解析器一讀到點運算子就會知道要這樣轉換 ↓
1 | var person = new Object(); |
課程有提到這動作有一個專業術語,叫做【成員取用】運算子,而成員就是物件的成員。
另外課程中還有做這個動作,在物件下建立物件 ↓
1 | var person = new Object(); |
然後也可以透過點運算子增加屬性與值 ↓
1 | person.address.street = '111 Main'; |
那在這種運算子優先性相同時,改成就會考慮相依性,課程中有說明 點運算子是左相依性,所以是從左邊 address
到 street
。
物件就是名稱/值得組合,而這裡面可以包含字串、布林、函數等等。