js中基本數據類型與引用數據類型的本質區別

代碼

/**
 * 基本數據類型：string, number, boolean, null, undefined。
 *
 * 說明：
 *     基本數據類型的變量是保存在棧內存中的，基本數據類型的值
 * 直接在棧內存中存儲，值與值之間是獨立存在的，修改一個變量不
 * 會影響其餘的變量。
 *
 * 比較：
 *     當比較兩個基本數據類型的值時，本質上是比較值
 */
// 建立number型變量a值爲1
var a = 1;
// 將變量a賦值給變量b，本質是值的拷貝
var b = a;
console.log(`a = ${a}, b = ${b}`); // a = 1, b = 1
// 將b的值加1，重點查看a的值是否變化
b += 1;
console.log(`a = ${a}, b = ${b}`); // a = 1, b = 2

// 建立number型變量c值爲1
var c = 1;
// 本質上是值的比較
if (a == c) {
    console.log(`a與c的值相等, a = ${a}, c = ${c}`); // a與c的值相等, a = 1, c = 1
} else {
    console.log(`a與c的值不相等, a = ${a}, c = ${c}`);
}

/**
 * 引用類型：object
 *
 * 說明：
 *     對象是保存在堆內存中的，每建立一個新的對象，就會在堆內存
 * 中開闢出一個新的空間，而變量保存的是對象的內存地址(對象的引用
 * )，若是兩個變量保存的是同一個對象引用，當修改其中一個變量修改
 * 屬性時，另外一個也會受到影響。
 *
 * 比較：
 *     當比較兩個引用數據類型時，本質上是比較的對象的內存地址，如
 * 果兩個對象的屬性是如出一轍的，可是地址不一樣，也會返回false。
 */
// 建立obj1爲Object的對象
var obj1 = new Object();
// 新增屬性foo，並賦值'bar'
obj1.foo = 'bar';
console.log(obj1); // {foo: "bar"}

// 將obj1賦值給obj2，本質是地址的拷貝
var obj2 = obj1;
console.log(obj2); // {foo: "bar"}

// 修改obj2，新增屬性viva
obj2.viva = 'ovov';
// obj1與obj2同時改變
console.log(obj1); // {foo: "bar", viva: "ovov"}
console.log(obj2); // {foo: "bar", viva: "ovov"}

// 修改obj1屬性foo的值爲'kiki'
// obj1與obj2同時改變
obj1.foo = 'kiki';
console.log(obj1); // {foo: "kiki", viva: "ovov"}
console.log(obj2); // {foo: "kiki", viva: "ovov"}

// 刪除obj2的屬性viva
delete obj2.viva;
// obj1與obj2同時改變
console.log(obj1); // {foo: "kiki"}
console.log(obj2); // {foo: "kiki"}

// 將obj2設置爲null
obj2 = null;
// 只有obj2被設置爲null，obj1沒有發生變化
console.log(obj1); // {foo: "kiki"}
console.log(obj2); // null

// 建立obj3爲Object的對象
var obj3 = new Object();
// 新增屬性foo
obj3.foo = 'kiki';
// 二者的對象和屬性都同樣
console.log(obj3); // {foo: "kiki"}
console.log(obj1); // {foo: "kiki"}

// 比較obj1與obj3
// 本質是比較obj1與obj3保存的內存地址是否相同
if (obj1 == obj3) {
    console.log('obj1與obj3相等');
} else {
    // 能夠看出儘管obj1與obj3的屬性和值都同樣，可是二者仍是不等
    // 本質上是由於obj1與obj3保存的地址不相同
    console.log('obj1與obj3不相等'); // obj1與obj3不相等
}

總結

查看源代碼