0%

JS核心-(26)-物件-物件參考觀念的實際運作模式

前言

用 Excel 表來說明傳值、傳參考的特性

傳值

以上一篇文章的範例來說

var person = '小明';
var person2 = person;

person2 = '杰倫';

console.log(person,person2); // 小明 , 杰倫  

所以 personperson2 結果分別是 小明杰倫


傳參考

var person = {
    name: '小明'
};
var person2 = person;

person2.name = '杰倫';

console.log(person.name, person2.name); // 杰倫 , 杰倫

因為 personperson2 指向同一個記憶體 0x01 ,當 person2 更改了 name 的同時, personname 也會變成 '杰倫'


那麼我們再來看看下面的例子

var family = {
    name: '小明家',
    members: {
        father: '老爸',
        mom: '老媽',
        ming: '小明'
    }
};
var member = family.members;
member.ming = '大明';
console.log(member, family.members)

很明顯這也是一個傳參考的例子,根據上篇文章的知識我們可以知道

console.log(member, family.members) 印出來的結果 不論是 member.ming 還是 family.members.ming 都會被改成大明,就是因為 member 被賦予的是 family.members 這個物件的記憶體位置。

我們再以 excel 的方式來說明

所以如果今天把它改成大明的話

member.ming = '大明';


接下來看一個比較複雜的例子

var a = { x: 1 };
a.y = a;
console.log(a);

可以看到先以物件實字定義了 var a = { x: 1 }; ,再定義 物件 a 裡面有一個 y 的屬性,並且把 a 他自己賦值(傳參考)到 y 這個屬性上,最後在印出來看看 a 的結果。

我們用 excel 講解這個原理

如果今天要找 a 裡面的 y 的話,他又會找到 0x01 的自己,造成無限的循環。
這個特別的例子其實是要強化對於傳參考這件事情的觀念