JavaScript Weird Part (22) - 物件與「點」

在 JavaScript 中，物件與函式兩者是非常相關的，它們在很多情況下幾乎是一樣的，讓我們從本篇之後來談談物件與函式，但在這之前得先了解本篇標題「物件與點」

物件與「點」

一個物件是被賦值的名稱與值的組合（Name/Value），但是這個值是什麼？所以物件可以有一個原始的設定叫做屬性 (primitive property)，例如前面提到的純值、布林或字串；或者物件可以再連結另外的物件，值可以是另一個「名稱/值」的組合或物件。物件裡還可以有函數，這種情況稱為「方法」(method)。

JavaScript 怎麼取得物件的屬性和方法？

在記憶體裡面，核心物件會有一個記憶體的位址空間，供物件參照到這些電腦記憶體中的屬性和方法，找到這些屬性和方法的所在。

var person = new Object();
person["firstname"] = tony;

在 JavaScript 當中，取得屬性和方法有兩種方式。以上是其中一種，利用中括號方式，稱為「計算取用成員」（computer member access）的運算子。

在中括號內放進值的名稱，這是要放進記憶體的東西，這時它還不存在，所以我們令它等於 tony。這會在記憶體中創造空間，並且有個名稱叫做firstname 的東西。然後 person 物件就能參考到 firstname 在記憶體內的位置，並且知道firstname 的值是一個字串，這就是取得物件屬性的一種方法。

這個運算子好用的地方是可以用變數修改物件的屬性名稱。

var person = new Object();
person['firstName'] = 'Tony';
person['lastName'] = 'Alicea';
var firstNameProperty = 'firstName';
console.log(person);
console.log(person[firstNameProperty]);

印出物件看看：

這個方法有時可以在框架中看到，因為可以決定要取用哪種屬性，但比較起來還是 . 運算子比較方便。

使用 . 運算子

. 運算子的方式比較常見且簡單

console.log(person.firstName);
// tony

也可以用 . 運算子創立物件的新屬性名稱

person.address.street = '1111. Main St. ';

簡單來說這個點就和中括號一樣，是「成員取用」運算子，這個成員指的是物件的成員。所以這些運算子會幫我們找到物件的成員，像是方法和屬性。

物件內的物件

前面提到物件可以內含另一個物件，這也可以用 . 運算子來做。

var person = new Object();
person['firstName'] = 'Tony';
person['lastName'] = 'Alicea';
var firstNameProperty = 'firstName';
console.log(person);
console.log(person[firstNameProperty]);
person.dog="Paul";
console.log(person.dog);
person.address=new Object;
person.address.street = '1111. Main St. ';
console.log(person.address.street);
// 也可以這樣寫 console.log(person['address']['street']);

再次輸出person物件觀察，可以發現新增的物件被包覆在 person 物件內了。

另外程式碼中的「person.address.street= ‘111 Main St.’;」因為用到了兩次運算子，所以我們查一下運算子的優先性與相依性得知，「.」運算子為左相依性，因此會從左邊開始運算到右邊。

白話來說就是會先到 person 物件內找到屬性物件 address ， 然後再從 address 內找到 street 屬性並且設定字串值。

附註

物件在記憶體中是「名稱/值」的組合，它也能夠包含不同的屬性配對，像是字串、布林，也可以包含函式（在此稱為方法），但本篇還不會討論到方法，在此之前有其他部分需先了解。