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

CoffeX 發布于2019-08-20 14:32 / 1637人閱讀

摘要：前兩天看到大神的關于基本數據類型和引用類型的區別的文章覺得寫得非常不錯，就想著在其基礎上加上自己平時看到的一些知識點和理解，所以就有了以下的文章基本數據類型基本數據類型包括基本數據類型是按值訪問的，就是說我們可以操作保存在變量中的實際的值基

前兩天看到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的時候，后臺會自動完成下列操作：

創建String類型的一個實例；// var s1 = new String("helloworld");

在實例上調用指定方法；// var s2 = s1.substr(4);

銷毀這個實例；// s1 = null;

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

參考資料：

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81725.html

詳解js深淺復制

摘要：從而也引出了所謂的深淺復制問題。附注對于淺復制，其實還有其他的實現方式，比如數組中和方法，對于這些還是希望大家自己了解，本本主要針對深淺復制的實現原理進行解析。前言在之前寫繼承的過程談到了深淺復制的問題，因為有讀者反映到需要解析，趁今天周末寫一篇解析，今天的主體相對之前來說理解難度低一些，篇幅可能也比較短，諸君按需閱讀即可。從兩種數據類型說起在js中，變量的類型可以大致分成兩種...

Lin_YT 2019-08-20 15:22 評論0 收藏0
JavaScript類型系統詳解

摘要：基本數據類型中有種簡單數據類型也稱基本數據類型，，，和。不支持任何創建自定義類型的機制，而所有值都是上述中數據類型之一。基本數據類型 ECMAScript中有5種簡單數據類型（也稱基本數據類型）：Undefined，Null，Boolean，Number和String。還有一種復雜數據類型（引用型）Object。ECMAScript不支持任何創建自定義類型的機制，而所有值都是上述6中...

ruicbAndroid 2019-08-19 17:59 評論0 收藏0
Java 內存區域詳解

摘要：三對象的內存布局對象在堆中的布局分為三個區域對象頭，實例數據，對齊填充?？偨Y了解內存區域是對的深入學習，以前只知道有堆和棧的區分，現在我們了解到了具體的堆棧的作用。引言學習Java也有一段時間了，總感覺有些東西學的不是很精通。例如Java內存區域到底是怎么樣的？程序是怎么跑的？對象是怎么存放的？這些都影響了我對自己的程序運行的熟悉程度。一. 運行時數據區域 showImg(/im...

darry 2019-08-14 12:16 評論0 收藏0
overview_java(一)

摘要：字符串常用的幾種方法，拼接檢測字符串內容是否相等引用是否相等字符串長度變量名，，區別字符串常量字符串變量線程安全字符串變量非線程安全具體區別自行百度，不做詳解八。重新復習下java哦，當然一些環境變量配置之類的就忽略不計了啊。百度一坨，都是些常規的東西一：java語句的一些規則習慣很重要雖然很想跳過，但想想還是稍微記錄一些 1，結尾要有分號 ...

liukai90 2019-08-16 10:45 評論0 收藏0
詳解js深淺復制問題

摘要：二這么分的好處就是在于節省內存資源，便于合理回收內存詳解中的深淺復制有了上面的鋪墊，那么我們理解起深淺復制就變得容易的許多。前言對于前端開發來說，我們經常能夠遇到的問題就是js的深淺復制問題，通常情況下我們解決這個問題的方法就是用JSON.parse(JSON.Stringify(xx))轉換或者用類似于Inmmutable這種第三方庫來進行深復制，但是我們還是要弄懂其中原理，這樣...

X1nFLY 2019-08-26 11:33 評論0 收藏0