33 個 JavaScript 核心概念系列（二）: 值型別與引用型別

weixin_34232744發表於2019-01-05
JavaScript型別

值型別與引用型別

一、說點別的

這是《關於 JavaScript 你必須要知道的 33 個概念 》系列的第二篇文章，今天稍微給大家介紹下這個系列。

如今前端的發展日新月異，很多人(包括我)都是追逐著一些流行的框架學習，但往往是浮於表面，知其然而不知其所以然。當我認真的想要搞懂 react、redux 實現原理時，才發現，JavaScript 的基礎知識是如此重要。

一直以來，自己對於 JavaScript 的理解都散亂無章，這就造成很多知識當時看過後感覺明白了，過一段時間用到的時候卻仍舊一臉懵逼。因此，我決定整理這樣一個系列，加深自己對 JavaScript 的理解，形成知識體系，以達到融會貫通。

這個計劃會寫 33 篇文章，會包括 JavaScript 中的基礎概念如「資料型別」、「表示式和語句」、「作用域」等，以及如「閉包」、「this」、「promise」等有些理解難度的知識點。

首先宣告我不是什麼大佬，對於很多知識也是一邊鑽研一邊寫，所以如果有不同的看法，懇請大家指正，我會及時更新文章的不足之處！

接下來，我們言歸正傳。

二、定義和分類

在上一篇文章（資料型別）中我們知道 JavaScript 的資料型別分為基本資料型別和物件資料型別。它們的區別之一就是在計算機中的儲存方式不同：基本型別資料是將變數名及值儲存在變數物件中，而引用型別的資料是將變數名和地址儲存在變數物件中，真正的值是儲存在堆記憶體中。

再次將那張圖放過來：

33 個 JavaScript 核心概念系列（二）: 值型別與引用型別

其中，基本型別（number,string,boolean,undefined,null）,便稱為值型別，而物件型別（object,function,array及封裝物件）便稱為引用型別。

三、值型別與引用型別的區別

1. 可變性與不可變性

值型別的資料是不可變的。 這裡說的不可改變，是指值本身，一旦建立，便不可更改。什麼意思？舉個例子：

let a = 34;
a = 43;
複製程式碼

我們先宣告一個變數 a 並賦值為 34，此時，在變數物件中 34 就已經存放在固定位置，後邊將 a 的值改為 43，看起來好像是將 34 改變成了 43， 其實不然，我們只是又在變數物件中存入了 43，原來的 34，仍舊原封未動的存在那裡，等待著被記憶體回收。如下圖所示：

33 個 JavaScript 核心概念系列（二）: 值型別與引用型別

引用型別值是可以改變的。 引用型別的值是將變數名稱和引用地址儲存在變數物件中，而值是在堆記憶體中，我們可以隨時更改它本身的值。

let b = {
	m: 1,
	n: 'emmm'
}
b.m = 4;
b;   // {m: 4,n: 'emmm'}
複製程式碼

在上例中，我們宣告 b 是一個引用型別值，接著，我們對 b 進行了更改，我們可以看到，更改是有效的。

2. 值的複製

值型別的複製是值本身的複製，引用型別的複製是值得引用的複製。 不同的複製方式會在複製後有不同的表現。

// 值型別的複製
var a = 45;
var b = a;
console.log(b); // 45
b = "someword";
console.log(b) // "someword"
console.log(a); // 45
// 引用型別的複製
var someone= {
  age: 14,
  weight: 134,
 sex: 'man'
};
var anthor = someone;
console.log(anthor); // {age: 14, weight: 134, sex: "man"}
anthor.age = 16;
console.log(anthor); // {age: 16, weight: 134, sex: "man"}
console.log(someone); // {age: 16, weight: 134, sex: "man"}
複製程式碼

從上面的程式碼中可以看到，變數 b 複製變數 a 的之後進行了更改，b 的值改變了，而 a 的值沒變；變數 anthor 複製的是 someone 的引用，anthor 更改了引用指向的那個物件的值，someone 的值自然也跟著改變了。

具體過程如圖所示：

33 個 JavaScript 核心概念系列（二）: 值型別與引用型別

三、應用

它們的概念理解起來很簡單，但很多時候應用到實際場景中，我們就可能想不到這一層，會造成很多意外的問題，接下來我們看一下。

1. == 與 ===

在進行 == 及 === 判斷時，前者會對等號兩邊的值進行強制型別轉換，這對判斷值型別的相等有所區別。但是對於引用型別，它們都只會判斷引用地址是否相同，而不管物件裡的屬性值是否相同。

比如：

// 值型別相等
let a = 45;
let b  = 45;
console.log(a == b); //  true
b = '45';
console.log(a == b); // true
console.log(a === b); // false
// 引用型別相等
let men_1 = {
  age: 23,
  sex: 'man',
};
let men_2 = {
  age: 23,
  sex: 'man',
};

let men_3 = men_1;
console.log(men_1 == men_2); //  false
console.log(men_1 === men_2); //  false
console.log(men_1 == men_3); // true
console.log(men_1 === men_3); // true
複製程式碼

從上面我們可以看到：45 === 45 但 45 != '45'，但 men_1 雖然和 men_2 的值相同，但他們並不相等，無論是 == 還是 ===。

那該如何按照我們的想法比較呢？

可以把它們轉化為字串進行比較，當然，這樣也不能保證完全正確（比如物件中含有正規表示式），更嚴格的方法以後再討論。

function compare(a, b) {
  return JSON.stringify(a) == JSON.stringify(b);
}
複製程式碼

2. 函式傳參

函式傳參時，是將傳入的引數拷貝到函式的引數引數變數上，因此，拷貝帶來的問題在函式傳參時仍舊存在。

function foo(a,b) {
  var d = a;
  d = 'string';
  var e = b;
  e.name = 'xiaohong';
}
var exmp_1 = 3;
var exmp_2 = {
  name: 'xiaohua'
};
foo(exmp_1,exmp_2);
console.log(exmp_1); // 3
console.log(exmp_2); // {name: "xiaohong"}
複製程式碼

如上所示，值型別傳入後再函式內的修改不會汙染外部的變數，而引用型別的變數由於複製的是引用，在函式內部的改動會影響到外部的變數。

若是想要避免這種情況，則需要在接受引數時進行深拷貝。

function foo(people) {
  const newPeople = JSON.parse(JSON.stringify(people));
  newPeople.firstName = 'wang';
}
var Liu = {
   firstName: 'liu'
}
foo(Liu);
console.log(Liu); // {firstName: "liu"}
複製程式碼

四、一道小題

到此，關於值型別與引用型別的介紹就結束了，留一道題給大家，大家可以藉此看一看對本文的理解。

function create(person) {
  var personA = person;
  personA.name = 'David';
  var personB = {
      name: 'saay',
      age: 13
  };
  return personB;
}
var Jone = {
  name: 'Join',
  age: 25
}
var Wang = create(Jone);
console.log(Jone) ;// ??
console.log(Wang); // ??
複製程式碼

原文地址：落明的blog

相關文章