基本數據類型和引用類型的區別詳解

前兩天看到kraaas大神的關於基本數據類型和引用類型的區別的文章以爲寫得很是不錯，就想着在其基礎上加上本身平時看到的一些知識點和理解，因此就有了如下的文章

js基本數據類型：

js基本數據類型包括：undefined,null,number,boolean,string.基本數據類型是按值訪問的，就是說咱們能夠操做保存在變量中的實際的值

1. 基本數據類型的值是不可變的

任何方法都沒法改變一個基本類型的值，好比一個字符串：

var name = "change";
name.substr();//hang
console.log(name);//change

var s = "hello";
s.toUpperCase()//HELLO;
console.log(s)//hello

經過這兩個例子，咱們會發現原先定義的變量name的值始終沒有發生改變，而調用substr()和toUpperCase()方法後返回的是一個新的字符串，跟原先定義的變量name並無關係

或許有人會有如下的疑問，看代碼：

var name = "change";
name = "change1";
console.log(name)//change1

這樣看起來name的值「改變了」
其實，var name = "change"，這裏的基礎類型是string，也就是"change",這裏的"change"是不能夠改變的，name只是指向"change"的一個指針，指針的指向能夠改變，因此你能夠name = "change1".此時name指向了"change1"，同理，這裏的"change1"一樣不能夠改變

也就是說這裏你認爲的改變只是「指針的指向改變」

這裏的基礎類型指的是"change"，而不是name，要區分清楚

2. 基本數據類型不能夠添加屬性和方法

var p = "change";
p.age = 29;
p.method = function(){console.log(name)};
console.log(p.age)//undefined
console.log(p.method)//undefined

經過上面的代碼，咱們知道不能給基本類型添加屬性和方法，也再次說明基本類型是不可變的

3. 基本數據類型的賦值是簡單賦值

若是從一個變量向另外一個變量賦值基本類型的值，會在變量對象上建立一個新值，而後把該值複製到爲新變量分配的位置上

var a = 10;
var b = a;
a++;
console.log(a)//11
console.log(b)//10

上面的代碼中，a中保存的值是10.當使用a的值來初始化b時，b中也保存了值10.但b中的10和a中的10是徹底獨立的.b中的值知識a中值的一個副本.因此這兩個變量能夠參與任何操做而不會相互影響.以下圖：

4. 基本數據類型的比較是值的比較

var person1 = '{}';
var person2 = '{}';
console.log(person1 == person2); // true

5. 基本數據類型是存放在棧區的

假若有如下幾個基本類型的變量：

var name = "jozo";
var city = "guangzhou";
var age = 22;

那麼它的存儲結構以下圖：

棧區包括了變量的標識符和變量的值

js引用類型：

js中除了上面的基本類型以外就是引用類型了，也能夠說就是對象了，好比：Object,Array,Function,Data等

1. 引用類型的值是能夠改變的

var o = {x:1};
o.x = 2;//經過修改對象屬性值更改對象
o.y = 3;再次更改對象，給它增長一個屬性

var a = [1,2,3];
a[0] = 0;//更改數組的一個元素
a[3] = 4;//給數組增長一個元素

2. 引用類型能夠添加屬性和方法

var person = {};
person.name = "change";
person.say = function(){alert("hello");}
console.log(person.name)//change
console.log(person.say)//function(){alert("hello");}

3. 引用類型的賦值是對象引用

先看如下代碼：

var a = {};
var b= a;
a.name = "change";
console.log(a.name)//change;
console.log(b.name)//change
b.age = 29;
console.log(a.age)//29
console.log(b.age)//29

當從一個變量向另外一個變量賦值引用類型的值時，一樣也會將儲存在變量中的對象的值複製一份放到爲新變量分配的空間中.引用類型保存在變量中的是對象在堆內存中的地址，因此，與基本數據類型的簡單賦值不一樣，這個值的副本其實是一個指針，而這個指針指向存儲在堆內存的一個對象.那麼賦值操做後，兩個變量都保存了同一個對象地址，而這兩個地址指向了同一個對象.所以，改變其中任何一個變量，都會互相影響

他們的關係以下圖：

所以，引用類型的賦值實際上是對象保存在棧區地址指針的賦值，因此兩個變量指向同一個對象，任何的操做都會互相影響.

4. 引用類型的比較是引用的比較

var person1 = {};
var person2 = {};
console.log(person1 == person2)//false

爲何兩個對象看起來一摸同樣，可是卻不相等呢？

由於引用類型的比較是引用的比較，換句話說，就是比較兩個對象保存在棧區的指向堆內存的地址是否相同，此時，雖然p1和p2看起來都是一個"{}"，可是他們保存在棧區中的指向堆內存的地址倒是不一樣的，因此兩個對象不相等

5. 引用類型是同時保存在棧區和堆區中的

引用類型的存儲須要在內存的棧區和堆區共同完成，棧區保存變量標識符和指向堆內存的地址

假若有如下幾個對象：

var person1 = {name:"change1"};
var person2 = {name:"change2"};
var person3 = {name:"change3"};

則這三個對象在內存中保存的狀況以下圖：

基本包裝類型(包裝對象)：

先看下如下代碼：

var s1 = "helloworld";
var s2 = s1.substr(4);

上面咱們說到字符串是基本數據類型，不該該有方法，那爲何這裏s1能夠調用substr()呢？

經過翻閱js權威指南第3.6章節和高級程序設計第5.6章節咱們得知，ECMAScript還提供了三個特殊的引用類型Boolean,String,Number.咱們稱這三個特殊的引用類型爲基本包裝類型，也叫包裝對象.

也就是說當讀取string,boolean和number這三個基本數據類型的時候，後臺就會建立一個對應的基本包裝類型對象，從而讓咱們可以調用一些方法來操做這些數據.

因此當第二行代碼訪問s1的時候，後臺會自動完成下列操做：

1. 建立String類型的一個實例；// var s1 = new String("helloworld");
2. 在實例上調用指定方法；// var s2 = s1.substr(4);
3. 銷燬這個實例；// s1 = null;

正由於有第三步這個銷燬的動做，因此你應該可以明白爲何基本數據類型不能夠添加屬性和方法，這也正是基本裝包類型和引用類型主要區別：對象的生存期.使用new操做符建立的引用類型的實例，在執行流離開當前做用域以前都是一直保存在內存中.而自動建立的基本包裝類型的對象，則只存在於一行代碼的執行瞬間，而後當即被銷燬

參考資料：

https://segmentfault.com/a/11...