提姆寫程式

0%

JS 核心觀念筆記 - 物件屬性與參考特性

發表於 分類於 Disqus：
傳值與傳參考，傻傻分不清楚

core

未定義的物件屬性與預設值

下方有一物件，前面已經知道如果要取其值的方法，

1
2
3
4
let family = {
  name: "提姆家",
};
console.log(family.name); //提姆家

但無法在未定義的屬性下取得值，也就是說沒有在物件中先給予的屬性，沒有辦法在外部給值。

1
2
3
4
5
let family = {
  name: "提姆家",
};

console.log((family.room.Tim = "提姆的房間"));

如上方所示，在 family 物件中並沒有 room 這個屬性，所以也無法給予 Tim 這個屬性與值。

undefined

但如果要解決這個問題，就要先在物件中寫入其物件屬性，就可以新增其屬性值了。

1
2
3
4
5
6
let family = {
  name: "提姆家",
  room: {}, //新增的物件屬性
};

console.log((family.room.Tim = "提姆的房間")); //提姆的房間

物件的參考特性

了解物件參考特性前，先來兩個範例。

傳純值

1
2
3
4
let person = "提姆";
let person2 = person;
person2 = "Tim";
console.log(person, person2); //提姆 Tim

物件傳參考

1
2
3
4
5
6
7
8
let person = {
  name: "提姆",
};

let person2 = person;
person2.name = "Tim";
console.log(person, person2); //得到兩個相同的物件，name 的值皆為 Tim。
console.log(person === person2); //true

上方兩個看起來是很像的範例，但傳純值跟傳參考的方式是不同的。

如果將上方程式改成這樣：

1
2
3
4
5
6
7
8
9
10
11
let person = {
  name: "提姆",
};

let person2 = person;

person2 = {
  name: "提姆",
};
console.log(person, person2); //得到兩個相同的物件，name 的值相同。
console.log(person === person2); //false

兩個物件雖然內容的屬性與值都相同，但得到的結果卻是 false，原因是這兩物件本身已經是不同的物件，並非使用同一個物件參考。

傳值

  • Boolean
  • Null
  • Undefined
  • Number
  • String
  • …

傳參考

  • 物件(包含函式與陣列)

觀念：除了純值外，其他都可以看成物件。