Javascript 值和引用之間的區別

做者：Ahmad shaded
譯者：前端小智
來源：sitepoint

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

在JavaScript中，能夠經過值和引用傳遞。二者之間的主要區別是，按值傳遞發生在賦值基本類型的時候，而賦值對象時按引用傳遞。接下來，跟着智哥，來詳細看看。

1.理解基本類型和對象

JavaScript提供了2種數據類型：基本類型和對象。

基本類型有 number, boolean, string, symbol,null,undefined。

// 基本類型
const number = 10;

const bool = false;

const str = 'Hello!';

const missingObject = null;

const nothing = undefined;

第二類是對象，普通對象、數組、函數等等都是對象。

// Objects
const plainObject = {
  prop: 'Value'
};

const array = [1, 5, 6];

const functionObject = (n1, n2) => {
  return n1 + n2;
};

換句話說，任何不是基本類型的值都是對象。

2.值

按值傳遞的簡單規則是 JS 中的全部基本類型都按值傳遞，就這麼簡單。

按值傳遞意味着每次將值賦給變量時，都會建立該值的副本，每一次哦。

舉個例子來看看，假設咱們有兩個變量 a 和 b：

let a = 1;
let b = a;

b = b + 2;

console.log(a); // 1
console.log(b); // 3

第一條語句，聲明一個變量 a，並賦值爲 1。

第二條語句，聲明一個變量 b，並把 a 的值賦值給它。

最後，b = b + 2增長2並變爲3。b變量發生變化，而且該變化不會影響a的值。

3.引用

經過引用傳遞的方式與值傳遞相比會有所不一樣。

當建立一個對象時，就獲取一個對該對象的引用。若是兩個變量持有相同的引用，那麼改變對象會反映在兩個變量中。

請看下面代碼：

let y = x;

y.push(2);

console.log(x); // [1, 2]
console.log(y); // [1, 2]

第一個語句let x =[1]建立一個數組，定義一個變量x，並使用對建立的數組的引用來初始化變量。

而後let y = x定義一個變量y，並使用存儲在x變量中的引用來初始化y，這是一個引用傳遞。

y經過y.push(2)通來改變數組。由於x和y變量引用相同的數組，因此這種變化會反映在兩個變量中。

注意：爲簡單起見，我說變量包含對對象的引用。 可是嚴格說來，JavaScript中的變量包含的值是對對象的引用。

4.值的比較和引用的比較

在比較對象時，理解值和引用之間的區別很是重要。

當使用嚴格比較運算符===時，若是兩個變量的值相同，則它們相等。 如下全部比較均相等

const one = 1;
const oneCopy = 1;

console.log(one === oneCopy); // true
console.log(one === 1);       // true
console.log(one === one);     // true

one和oneCopy具備相同的值1。當兩個操做數都爲1時，操做符===的計算結果都爲true。

可是比較運算符===在比較引用時的工做方式有所不一樣。 2個引用只有在引用徹底相同的對象時才相等。

ar1和ar2保存對不一樣數組實例的引用：

const ar1 = [1];
const ar2 = [1];

console.log(ar1 === ar2); // false
console.log(ar1 === [1]);  // false

const ar11 = ar1;
console.log(ar1 === ar11); // true
console.log(ar1 === ar1);  // true

ar1和ar2引用結構相同的數組，可是ar1 === ar2的計算結果爲false，由於ar1和ar2引用了不一樣的數組對象。

僅當比較指向相同對象的引用時，比較運算符才返回true：ar1 === ar11或ar1 === ar1。

5.總結

在JavaScript中，原始類型做爲值傳遞：意味着每次分配值時，都會建立該值的副本。

另外一方面，對象（包括普通對象，數組，函數，類實例）是引用。 若是修改對象，則引用該對象的全部變量都將看到更改。

比較運算符區分比較值和參考。 僅當引用徹底相同的對象時，2個保存引用的變量才相等，可是，不管值源自何處，只要變量具備相同的2個值（分別來自變量，文字等），則2個保存值的變量就相等。

~ 完，我是刷碗智，咱們下期見！

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://dmitripavlutin.com/va...

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。