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

前言

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

物件與「點」

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

object

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

object

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

1
var person = new Object();

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

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

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

1
2
3
4
5
6
var person = new Object();
person['fistname'] = 'Tony';
person['lastname'] = 'Alicea';
console.log(person);
console.log(person['fistname']);
console.log(person['lastname']);

person

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

1
2
3
4
5
6
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 ↓

1
2
3
4
5
var person = new Object();
person['fistname'] = 'Tony';
person['lastname'] = 'Alicea';
console.log(person);
console.log(person.fistname);

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

點運算子

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

MDN

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

1
2
3
4
5
var person = new Object();
person['fistname'] = 'Tony';
person['lastname'] = 'Alicea';
console.log(person);
console.log(person.'fistname');

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

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

1
2
3
4
5
6
var person = new Object();
person['fistname'] = 'Tony';
person['lastname'] = 'Alicea';
console.log(person);
console.log(person.fistname);
person.address = new Object();

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

1
person.address.street = '111 Main';

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

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

圖源

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

0%