js的基本數(shù)據(jù)類(lèi)型和引用數(shù)據(jù)類(lèi)型

kgbook 發(fā)布于2019-08-26 10:36 / 1356人閱讀

摘要：熟悉的同學(xué)都知道，它的數(shù)據(jù)類(lèi)型一般分為基本數(shù)據(jù)類(lèi)型和引用數(shù)據(jù)類(lèi)型復(fù)雜數(shù)據(jù)類(lèi)型。基本數(shù)據(jù)類(lèi)型基本數(shù)據(jù)類(lèi)型有種新增。動(dòng)態(tài)的屬性基本數(shù)據(jù)類(lèi)型的值是沒(méi)有辦法添加屬性和方法的。類(lèi)型檢測(cè)根據(jù)它的原型鏈來(lái)識(shí)別引用類(lèi)型。

熟悉js的同學(xué)都知道，它的數(shù)據(jù)類(lèi)型一般分為基本數(shù)據(jù)類(lèi)型和引用數(shù)據(jù)類(lèi)型（復(fù)雜數(shù)據(jù)類(lèi)型）。那么他們之間到底有什么不同？
從下面這個(gè)例子入手：

        var a = 1;
        var b = a;
        a = 2
        console.log(a === b)//false
        console.log(b) //1

        var obj = {};
        var obj1 = obj;
        obj.a = 1;
        console.log(obj === obj1) //true
        console.log(obj1) // {a:1}

可以看出來(lái)，b復(fù)制了a的值后，對(duì)a再進(jìn)行修改，b是完全不知道的！而修改對(duì)象obj后，obj的復(fù)制值obj1竟然也改變了，始終===。這是為什么？
原因是基本類(lèi)型值指的是簡(jiǎn)單的數(shù)據(jù)段，基本數(shù)據(jù)類(lèi)型是按值訪問(wèn)的，因?yàn)榭梢圆僮鞅４嬖谧兞恐械膶?shí)際的值。引用類(lèi)型的值是保存在內(nèi)存中的對(duì)象，通過(guò)引用地址來(lái)訪問(wèn)，對(duì)象添加a:1后，引用地址并沒(méi)有改變，所以obj === obj1。下面從4個(gè)方面看一下基本數(shù)據(jù)類(lèi)型和引用數(shù)據(jù)類(lèi)型的區(qū)別。

基本數(shù)據(jù)類(lèi)型

js基本數(shù)據(jù)類(lèi)型有6種:null、undefined 、boolean、number、string 、symbol(es 6新增)。

1.動(dòng)態(tài)的屬性

基本數(shù)據(jù)類(lèi)型的值是沒(méi)有辦法添加屬性和方法的。

var a = 1;
a.b = 2;//報(bào)錯(cuò)： Uncaught TypeError: Cannot create property "b" on number "1"

2.復(fù)制變量值

可以看到，在從一個(gè)變量向另一個(gè)變量復(fù)制基本類(lèi)型值時(shí)，num1中的5和num2中的5是相互獨(dú)立的，所以修改num1或者num2是互不影響的。

3.參數(shù)傳遞

 var a = 1
 function fn(a){
   return a += 5
 }
 var b = fn(a) //6
 console.log(a) // 1

可以看出，基本數(shù)據(jù)類(lèi)型值做為函數(shù)參數(shù)傳遞時(shí)，a的值是不會(huì)改變的，只是在函數(shù)內(nèi)新復(fù)制了一份a，函數(shù)內(nèi)部的a跟外部的沒(méi)有任何關(guān)系。

4.類(lèi)型檢測(cè)

var s = "Nicholas";
var b = true;
var i = 22;
var u;
var n = null;
var o = new Object();
alert(typeof s); //string
alert(typeof i); //number
alert(typeof b); //bollean
alert(typeof u); // undefined
alert(typeof n);//object
alert(typeof o);//object

正常情況下，對(duì)基本數(shù)據(jù)類(lèi)型值的檢測(cè)可以通過(guò)typeof返回，但是typeof null會(huì)返回object？

在 javascript 的最初版本中，使用的 32 位系統(tǒng)，為了性能考慮使用低位存儲(chǔ)了變量的類(lèi)型信息：
000：對(duì)象
1：整數(shù)
010：浮點(diǎn)數(shù)
100：字符串
110：布爾
有 2 個(gè)值比較特殊：
undefined：用 - （?2^30）表示。
null：對(duì)應(yīng)機(jī)器碼的 NULL 指針，一般是全零。

引用數(shù)據(jù)類(lèi)型

1.動(dòng)態(tài)屬性

var person = new Object(); 
person.name = "Nicholas"; 
console.log(person.name); //"Nicholas"
delete person.name
console.log(person.name);//undefined

2.賦值變量

 var obj1 = new Object();
 var obj2 = obj1;
 obj1.name = "Nicholas";
 console.log(obj2.name);  //"Nicholas"

obj1賦值新對(duì)象時(shí)，只是向obj1中存如指向object的引用地址，向obj2賦值obj1時(shí)，僅僅是將obj1中儲(chǔ)存的引用地址復(fù)制給obj2，所以對(duì)象改變時(shí)，obj1和obj2會(huì)同時(shí)響應(yīng)。

3.參數(shù)傳遞

參數(shù)傳遞只有值傳遞，不存在引用傳遞。也就是說(shuō)，把函數(shù)外部的值復(fù)制給函數(shù)內(nèi)部的參數(shù)，就和把值從一個(gè)變量復(fù)制到另一個(gè)變量一樣。基本類(lèi)型值的傳遞如同基本類(lèi)型變量的復(fù)制一樣，而引用類(lèi)型值的傳遞，則如同引用類(lèi)型變量的復(fù)制一樣。有不少開(kāi)發(fā)人員在這一點(diǎn)上可能會(huì)感到困惑，因?yàn)樵L問(wèn)變量有按值和按引用兩種方式，而參數(shù)只能按值傳遞。

function fn(obj){
  obj.name = "new"
  return obj
}
var obj = new Object();
var newObj = fn(obj)
console.log(obj)//{name:new}
console.log(newObj)//{name:new}

看上面結(jié)果不就是引用傳遞嗎？obj傳進(jìn)去已經(jīng)被修改了啊！以上代碼中創(chuàng)建一個(gè)對(duì)象，并將其保存在了變量 person中。然后，這個(gè)變量被傳遞到 setName() 函數(shù)中之后就被復(fù)制給了 obj。在這個(gè)函數(shù)內(nèi)部，obj 和 person 引用的是同一個(gè)對(duì)象。換句話(huà)說(shuō)，即使這個(gè)變量是按值傳遞的，obj也會(huì)按引用來(lái)訪問(wèn)同一個(gè)對(duì)象。于是，當(dāng)在函數(shù)內(nèi)部為 obj 添加 name 屬性后，函數(shù)外部的 person 也將有所反映;因?yàn)?person 指向的對(duì)象在堆內(nèi)存中只有一個(gè)，而且是全局對(duì)象。有很多人錯(cuò)誤地認(rèn)為:在局部作用域中修改的對(duì)象會(huì)在全局作用域中反映出來(lái)，就說(shuō)明參數(shù)是按引用傳遞的。為了證明對(duì)象是按值傳遞的，我們?cè)倏匆豢聪旅孢@個(gè)經(jīng)過(guò)修改的例子:

function fn(obj){
  obj.name = "new"
  obj = new Object(); 
  obj.name = "Greg";
  return obj
}
var obj = new Object();
var newObj = fn(obj)
console.log(obj)//{name:new}
console.log(newObj)//{name:Greg}

如果 person是按引用傳遞的，那么 person 就會(huì)自動(dòng)被修改為指向其 name 屬性值為"Greg"的新對(duì)象。

4.類(lèi)型檢測(cè)

instanceof 根據(jù)它的原型鏈來(lái)識(shí)別引用類(lèi)型。
person instanceof Object
所有引用類(lèi)型的值都是 Object 的實(shí)例。因此，在檢測(cè)一個(gè)引用類(lèi)型值和 Object 構(gòu)造函數(shù)時(shí)，instanceof 操作符始終會(huì)返回 true。當(dāng)然，如果使用 instanceof 操作符檢測(cè)基本類(lèi)型的值，則該操作符始終會(huì)返回 false，因?yàn)榛绢?lèi)型不是對(duì)象。

引用類(lèi)型嵌套

看到這里，知道引用數(shù)據(jù)類(lèi)型賦值是引用地址，對(duì)象值是存放在堆中的。現(xiàn)在，在對(duì)象中A中嵌套對(duì)象B，那么A對(duì)象內(nèi)存堆中存放的是A對(duì)象內(nèi)存？還是A內(nèi)存的引用尼？是如何賦值的？

var obj = {
   arr:[1,2,3]
}
var obj1 = obj; //復(fù)制obj的引用地址
var arr = obj.arr //復(fù)制obj中arr的引用地址
var arr1 = obj1.arr // 復(fù)制arr中引用地址
arr1[0] = [1] 
console.log(arr) //[[1],1,2,3] 
console.log(arr1 === obj.arr) //true //地址還是相同
obj.arr = [4,5,6] //突然改變obj中arr，指向新對(duì)象，obj中arr的引用也隨之改變
console.log(arr) //[[1],1,2,3] //而此時(shí)arr、arr1的引用還沒(méi)有改變
console.log(obj1.arr === obj.arr) //true //obj的引用沒(méi)有改變
console.log(obj1.arr === arr) //false

從上面的例子可以看出，object1中儲(chǔ)存的是arr的引用地址，與arr、arr1擁有同一個(gè)引用地址。將obj1的arr重新賦值新的對(duì)象后，obj1中的引用地址會(huì)重新分配，obj里的arr也跟隨改變。假如，object中存放的是arr的內(nèi)存，那么obj1中arr重新指向新對(duì)象時(shí)，obj中的arr將會(huì)之?dāng)嚅_(kāi)聯(lián)系，像arr1一樣，顯然不是。