三、值類型與引用類型

tinysun1234 發(fā)布于2019-08-23 13:42 / 2883人閱讀

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

說(shuō)點(diǎn)別的

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

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

一直以來(lái)，自己對(duì)于 JavaScript 的理解都散亂無(wú)章，這就造成很多知識(shí)當(dāng)時(shí)看過(guò)后感覺(jué)明白了，過(guò)一段時(shí)間用到的時(shí)候卻仍舊一臉懵逼。因此，我決定整理這樣一個(gè)系列，加深自己對(duì) JavaScript 的理解，形成知識(shí)體系，以達(dá)到融會(huì)貫通。

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

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

接下來(lái)，我們言歸正傳。

定義和分類

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

再次將那張圖放過(guò)來(lái)：

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

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

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

let a = 34;
a = 43;

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

引用類型值是可以改變的。 引用類型的值是將變量名稱和引用地址存儲(chǔ)在變量對(duì)象中，而值是在堆內(nèi)存中，我們可以隨時(shí)更改它本身的值。

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

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

2. 值的復(fù)制

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

// 值類型的復(fù)制
var a = 45;
var b = a;
console.log(b); // 45
b = "someword";
console.log(b) // "someword"
console.log(a); // 45
// 引用類型的復(fù)制
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 復(fù)制變量 a 的之后進(jìn)行了更改，b 的值改變了，而 a 的值沒(méi)變；變量 anthor 復(fù)制的是 someone 的引用，anthor 更改了引用指向的那個(gè)對(duì)象的值，someone 的值自然也跟著改變了。

具體過(guò)程如圖所示：

應(yīng)用

它們的概念理解起來(lái)很簡(jiǎn)單，但很多時(shí)候應(yīng)用到實(shí)際場(chǎng)景中，我們就可能想不到這一層，會(huì)造成很多意外的問(wèn)題，接下來(lái)我們看一下。

1. == 與 ===

在進(jìn)行 == 及 === 判斷時(shí)，前者會(huì)對(duì)等號(hào)兩邊的值進(jìn)行強(qiáng)制類型轉(zhuǎn)換，這對(duì)判斷值類型的相等有所區(qū)別。但是對(duì)于引用類型，它們都只會(huì)判斷引用地址是否相同，而不管對(duì)象里的屬性值是否相同。

比如：

// 值類型相等
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 的值相同，但他們并不相等，無(wú)論是 == 還是 ===。

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

可以把它們轉(zhuǎn)化為字符串進(jìn)行比較，當(dāng)然，這樣也不能保證完全正確（比如對(duì)象中含有正則表達(dá)式），更嚴(yán)格的方法以后再討論。

function compare(a, b) {
  return JSON.stringify(a) == JSON.stringify(b);
}

2. 函數(shù)傳參

函數(shù)傳參時(shí)，是將傳入的參數(shù)拷貝到函數(shù)的參數(shù)參數(shù)變量上，因此，拷貝帶來(lái)的問(wèn)題在函數(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ù)內(nèi)的修改不會(huì)污染外部的變量，而引用類型的變量由于復(fù)制的是引用，在函數(shù)內(nèi)部的改動(dòng)會(huì)影響到外部的變量。

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

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

一道小題

到此，關(guān)于值類型與引用類型的介紹就結(jié)束了，留一道題給大家，大家可以借此看一看對(duì)本文的理解。

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

云服務(wù)器 GPU云服務(wù)器引用類型引用類型的變量 js引用數(shù)據(jù)類型 js引用類型的存儲(chǔ)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99413.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

tinysun1234

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

安裝tensorflow1.14

閱讀 2078·2023-04-25 17:48
如何建立虛擬主機(jī)-如何創(chuàng)建虛擬主機(jī)？

閱讀 3590·2021-09-22 15:37
大家用云主機(jī)做什么-云主機(jī)可以做什么？

閱讀 2941·2021-09-22 15:36
主機(jī)ip是什么-主機(jī)ip地址有什么要求？

閱讀 6007·2021-09-22 15:06
content 內(nèi)容生成技術(shù)1

閱讀 1644·2019-08-30 15:53
用code打造自己的過(guò)渡動(dòng)畫

閱讀 1431·2019-08-30 15:52
圖片輪播組件實(shí)現(xiàn)

閱讀 716·2019-08-30 13:48
網(wǎng)頁(yè)與瀏覽器窗口の真理

閱讀 1126·2019-08-30 12:44

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

三、值類型與引用類型

相關(guān)文章

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

JavaScript的深淺拷貝

淺拷貝與深拷貝

淺拷貝與深拷貝

面試官問(wèn)你基本類型時(shí)他想知道什么

發(fā)表評(píng)論

0條評(píng)論

tinysun1234

男|高級(jí)講師

TA的文章

安裝tensorflow1.14

如何建立虛擬主機(jī)-如何創(chuàng)建虛擬主機(jī)？

大家用云主機(jī)做什么-云主機(jī)可以做什么？

主機(jī)ip是什么-主機(jī)ip地址有什么要求？

content 內(nèi)容生成技術(shù)1

用code打造自己的過(guò)渡動(dòng)畫

圖片輪播組件實(shí)現(xiàn)

網(wǎng)頁(yè)與瀏覽器窗口の真理

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

三、值類型與引用類型

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！