33 個 js 核心概念（三）：值類型與引用類型

everfight 發(fā)布于2019-08-23 13:57 / 521人閱讀

摘要：它們的區(qū)別之一就是在計算機中的存儲方式不同基本類型數(shù)據是將變量名及值存儲在變量對象中，而引用類型的數(shù)據是將變量名和地址存儲在變量對象中，真正的值是存儲在堆內存中。

說點別的

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

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

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

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

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

接下來，我們言歸正傳。

定義和分類

在上一篇文章（數(shù)據類型）中我們知道 JavaScript 的數(shù)據類型分為基本數(shù)據類型和對象數(shù)據類型。它們的區(qū)別之一就是在計算機中的存儲方式不同：基本類型數(shù)據是將變量名及值存儲在變量對象中，而引用類型的數(shù)據是將變量名和地址存儲在變量對象中，真正的值是存儲在堆內存中。

再次將那張圖放過來：

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

值類型與引用類型的區(qū)別 1. 可變性與不可變性

值類型的數(shù)據是不可變的。 這里說的不可改變，是指值本身，一旦創(chuàng)建，便不可更改。什么意思？舉個例子：

let a = 34;
a = 43;

我們先聲明一個變量 a 并賦值為 34，此時，在變量對象中 34 就已經存放在固定位置，后邊將 a 的值改為 43，看起來好像是將 34 改變成了 43，其實不然，我們只是又在變量對象中存入了 43，原來的 34，仍舊原封未動的存在那里，等待著被內存回收。如下圖所示：

引用類型值是可以改變的。 引用類型的值是將變量名稱和引用地址存儲在變量對象中，而值是在堆內存中，我們可以隨時更改它本身的值。

let b = {
    m: 1,
    n: "emmm"
}
b.m = 4;
b;   // {m: 4,n: "emmm"}

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

2. 值的復制

值類型的復制是值本身的復制，引用類型的復制是值得引用的復制。 不同的復制方式會在復制后有不同的表現(xiàn)。

// 值類型的復制
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 的值自然也跟著改變了。

具體過程如圖所示：

應用

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

1. == 與 ===

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

比如：

// 值類型相等
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. 函數(shù)傳參

函數(shù)傳參時，是將傳入的參數(shù)拷貝到函數(shù)的參數(shù)參數(shù)變量上，因此，拷貝帶來的問題在函數(shù)傳參時仍舊存在。

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"}

如上所示，值類型傳入后再函數(shù)內的修改不會污染外部的變量，而引用類型的變量由于復制的是引用，在函數(shù)內部的改動會影響到外部的變量。

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

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); // ??

原文地址：阿木木的博客

GPU云服務器云服務器 js引用數(shù)據類型 js引用類型的存儲 js引用的數(shù)據類型 js引用json文件數(shù)據類型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/99851.html

33 個 js 核心概念（二）：數(shù)據類型

摘要：舉個例子在上面的例子可以看到，我們聲明是一個數(shù)字，但是我們在之后將的值又改成了字符串和布爾值后面會講這些類型?；绢愋妥址硎疽粋€字符串，如。因此，我們可以寫一個函數(shù)，用來精確檢測類型。 showImg(https://segmentfault.com/img/remote/1460000017309509?w=850&h=572); 定義 1. 什么是數(shù)據類型？數(shù)據類型，就是將...

QiShare 2019-08-23 13:57 評論0 收藏0
33 個 js 核心概念（四）：顯式 (名義) 與隱式 (鴨子）類型轉換

摘要：相對于顯式使用，隱式轉換則更加簡潔。隱式轉換為布爾值將其他類型值隱式轉換為布爾值是我們最常用的一種轉換。在以下場景中，都是進行判斷，而只要傳入的值不是布爾值，都會通過隱式類型轉換轉為布爾值。原文地址阿木木的博客與隱式鴨子類型轉換 showImg(https://segmentfault.com/img/remote/1460000017309581); 前言說實話，JavaScrip...

hoohack 2019-08-23 13:57 評論0 收藏0
三、值類型與引用類型

摘要：它們的區(qū)別之一就是在計算機中的存儲方式不同基本類型數(shù)據是將變量名及值存儲在變量對象中，而引用類型的數(shù)據是將變量名和地址存儲在變量對象中，真正的值是存儲在堆內存中。 showImg(https://segmentfault.com/img/remote/1460000017151449); 說點別的這是《關于 JavaScript 你必須要知道的 33 個概念》系列的第三篇文章，今天...

tinysun1234 2019-08-23 13:42 評論0 收藏0
33 個 js 核心概念（一）：函數(shù)調用棧，執(zhí)行上下文與變量對象

摘要：最先執(zhí)行完畢的一定是最里面的函數(shù)，執(zhí)行過后彈出調用棧，接著執(zhí)行上一層函數(shù)，直至所有函數(shù)執(zhí)行完，調用棧清空。到這里你應該就會明白，上面函數(shù)調用棧，就是生成了一個函數(shù)的執(zhí)行上下文。 showImg(http://upload-images.jianshu.io/upload_images/7803415-36e8e7d048f63524.jpg?imageMogr2/auto-orient...

ZHAO_ 2019-08-23 13:57 評論0 收藏0
JavaScript 是如何工作的：JavaScript 的共享傳遞和按值傳遞

摘要：它對數(shù)組和對象使用按值傳遞，但這是在的共享傳參或拷貝的引用中使用的按值傳參。例如在這里，變量和值在執(zhí)行期間存儲在堆棧中。返回值這是可選的，函數(shù)可以返回值，也可以不返回值。變量被推入堆棧，從而在執(zhí)行時成為的副本。這是專門探索 JavaScript 及其所構建的組件的系列文章的第 22 篇。想閱讀更多優(yōu)質文章請猛戳GitHub博客,一年百來篇優(yōu)質文章等著你！如果你錯過了前面的章節(jié)，可...

keithyau 2019-08-23 16:58 評論0 收藏0