[JS奇怪的世界]No.22 物件與「點」

前言

接下來是一個新的章節，物件與函數，許多課程都會將 JavaScript 中的這兩個東西當成不同的主題在教導，但這其實是一個天大的錯誤，why? 在其他的程式語言裡面這兩者確實是不同的主題，但 JavaScript 世界中這兩者就非常的有相關。

物件與「點」

前面章節有講過物件，(object)是一群「名稱/值」的組合，就像這樣 ↓

那為了方便解說所以我們來試著用不同的觀點來看物件吧，物件裡面通常可以有值、有物件及函數，就像這樣 ↓

但在物件裡面的函數，通常都被稱為方法(methods)，那一般物件會如何找尋函數與物件 or 值呢?來看一下範例 ↓

var person = new Object();

課程上先使用了 new 這個方法來建立一個新物件，接下來在記憶體就會知道它是一個物件，那該如何寫入資料呢?使用中括號運算子 ↓

person['fistname'] = 'Tony';
person['lastname'] = 'Alicea';

這樣寫物件就可以參考它記憶體的位子寫入，這時候我們可以試著輸出 person 看看 ↓

var person = new Object();
person['fistname'] = 'Tony';
person['lastname'] = 'Alicea';
console.log(person);
console.log(person['fistname']);
console.log(person['lastname']);

當然也可以透過變數的方式來取的物件資料 ↓

var person = new Object();
person['fistname'] = 'Tony';
person['lastname'] = 'Alicea';
var firstNamePropety = 'fistname';
console.log(person);
console.log(person[firstNamePropety]);

結果與 console.log(person['fistname']); 相同，那物件取出來的方式也還有一種方式，那就是透過點(.)運算子來取得 person ↓

var person = new Object();
person['fistname'] = 'Tony';
person['lastname'] = 'Alicea';
console.log(person);
console.log(person.fistname);

這邊要注意點(.)運算子也是一個函數。

MDN文件中也有說明點運算子的優先性可是第二高的呢!

所以點運算子真正的運作模式會像這樣，這邊的原理與語法解析器有關係，當語法解析器一讀到點運算子就會知道要這樣轉換 ↓

var person = new Object();
person['fistname'] = 'Tony';
person['lastname'] = 'Alicea';
console.log(person);
console.log(person.'fistname');

課程有提到這動作有一個專業術語，叫做【成員取用】運算子，而成員就是物件的成員。

另外課程中還有做這個動作，在物件下建立物件 ↓

var person = new Object();
person['fistname'] = 'Tony';
person['lastname'] = 'Alicea';
console.log(person);
console.log(person.fistname);
person.address = new Object();

然後也可以透過點運算子增加屬性與值 ↓

person.address.street = '111 Main';

那在這種運算子優先性相同時，改成就會考慮相依性，課程中有說明 點運算子是左相依性，所以是從左邊 address 到 street。

物件就是名稱/值得組合，而這裡面可以包含字串、布林、函數等等。

圖源

JavaScript 全攻略:克服 JS 奇怪的部分