你不知道的JavaScript--Item4 基本型別和基本包裝型別(引用型別)

itKingOne發表於2018-06-20

1、基本型別和引用型別

基本的資料型別有5個:undefined,boolean,number,string,null

typeof null;   //"object"
typeof undefined;  //"undefined"
typeof 1;  //"number"
typeof false  //"boolean"
typeof "1"  //"string"

(令人困惑的是,對null型別進行typeof操作得到的結果為“object”,然而,ECMAScript標準描述其為一個獨特的型別。)

為了便於操作基本型別值,ECMAScript還提供了三個特殊的引用型別:Boolean、Number和String,標準庫提供了建構函式來封裝布林值、數字和字串作為物件。這些型別與其他引用型別相似,同時也具有與各自的基本包裝型別相應的特殊行為。實際上,每當讀取一個基本型別值時,後臺就會建立一個對應的基本包裝型別的物件,從而讓我們能夠呼叫一些方法來操作這些資料。

var s1 = "some text";
var s2 = s1.substring(2);
var s3 = new String("some text");

但是不同於原始的字串,String物件是一個真正的物件。

typeof s1;  //"string"
typeof s3;  //"object"

這個例子中的變數s1包含一個字串,字串當然是基本型別值。而下一行呼叫了s1的substring()方法,並將返回的結果儲存在s2中。我們知道,基本型別值不是物件,因此從邏輯上講,它們不應該有方法(但是它們確實有方法)。其實,為了讓我們實現這種直觀的操作,後臺已經自動完成了一系列的處理。當第二行程式碼訪問s1時,訪問過程處於一種讀取模式,也就是從記憶體中讀取這個字串的值。而在讀取模式中訪問字串時,後臺都會自動完成下列處理:

(1)建立String型別的一個例項。

(2)在例項上呼叫指定方法。

(3)銷燬這個例項。

可以使用以下程式碼表示:

var s1 = new String("some text");
var s2 = s1.substring(2);
s1 = null;

經過此番處理,基本的字串值就變得跟物件一樣了。而且,上面三個步驟也適用於Boolean和Number型別對應的布林值和數字值。

2、生命週期

引用型別與基本包裝型別的主要區別就是物件的生命週期。使用new操作符建立的引用型別的例項,在執行流離開當前作用域之前都一直儲存在記憶體中。而自動建立的基本包裝型別的物件,只存在於這一行程式碼的執行期(瞬間),然後立即銷燬。這就意味著我們不能在執行時為屬性新增屬性和方法。

var s1 = "some text";
s1.color = "red";
alert(s1.color); //undefined

當然,可以顯示呼叫Boolean、Number和String來建立基本包裝型別的物件,不過,不幫不建議這麼做。對基本包裝型別的例項呼叫typeof會返回”object”,而且所有基本包裝型別的物件都會被轉化為布林值true。。

var obj = new Object("some text");
alert(obj instanceof String) //true

值得注意的是,使用new呼叫基本包裝型別的建構函式,與直接呼叫同名的轉型函式是不一樣的。

var value = "25";
var number = Number(value);//轉型函式
alert(typeof number) //number

var obj = new Number(var); //建構函式
alert(typeof obj) //object

3.基本型別特點

1.基本型別的值是不可變得:

任何方法都無法改變一個基本型別的值,比如一個字串:

var name = 'jozo';
name.toUpperCase(); // 輸出 'JOZO'
console.log(name); // 輸出  'jozo'

會發現原始的name並未發生改變,而是呼叫了toUpperCase()方法後返回的是一個新的字串。 
再來看個:

var person = 'jozo';
person.age = 22;
person.method = function(){//...};

console.log(person.age); // undefined
console.log(person.method); // undefined

通過上面程式碼可知,我們不能給基本型別新增屬性和方法,再次說明基本型別時不可變得;

2.基本型別的比較是值的比較:

只有在它們的值相等的時候它們才相等。 
但你可能會這樣:

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

它們不是相等嗎?其實這是型別轉換和 == 運算子的知識了,也就是說在用==比較兩個不同型別的變數時會進行一些型別轉換。像上面的比較先會把true轉換為數字1再和數字1進行比較,結果就是true了。 這是當比較的兩個值的型別不同的時候==運算子會進行型別轉換,但是當兩個值的型別相同的時候,即使是==也相當於是===。

var a = 'jozo';
var b = 'jozo';
console.log(a === b);//true

3.基本型別的變數是存放在棧區的(棧區指記憶體裡的棧記憶體)

假如有以下幾個基本型別的變數:

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

那麼它的儲存結構如下圖:

這裡寫圖片描述

棧區包括了 變數的識別符號和變數的值。

4.引用型別特點

引用型別會比較好玩有趣一些。

javascript中除了上面的基本型別(number,string,boolean,null,undefined)之外就是引用型別了,也可以說是就是物件了。物件是屬性和方法的集合。也就是說引用型別可以擁有屬性和方法,屬性又可以包含基本型別和引用型別。來看看引用型別的一些特性:

1.引用型別的值是可變的

我們可為為引用型別新增屬性和方法,也可以刪除其屬性和方法,如:

var person = {};//建立個控物件 --引用型別
person.name = 'jozo';
person.age = 22;
person.sayName = function(){console.log(person.name);} 
person.sayName();// 'jozo'

delete person.name; //刪除person物件的name屬性
person.sayName(); // undefined

上面程式碼說明引用型別可以擁有屬性和方法,並且是可以動態改變的。

2.引用型別的值是同時儲存在棧記憶體和堆記憶體中的物件

javascript和其他語言不同,其不允許直接訪問記憶體中的位置,也就是說不能直接操作物件的記憶體空間,那我們操作啥呢? 實際上,是操作物件的引用,所以引用型別的值是按引用訪問的。

準確地說,引用型別的儲存需要記憶體的棧區和堆區(堆區是指記憶體裡的堆記憶體)共同完成,棧區記憶體儲存變數識別符號和指向堆記憶體中該物件的指標,也可以說是該物件在堆記憶體的地址。 
假如有以下幾個物件:

var person1 = {name:'jozo'};
var person2 = {name:'xiaom'};
var person3 = {name:'xiaoq'};

則這三個物件的在記憶體中儲存的情況如下圖:

這裡寫圖片描述

3.引用型別的比較是引用的比較

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

上面講基本型別的比較的時候提到了當兩個比較值的型別相同的時候,相當於是用 === ,所以輸出是true了。再看看:

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

可能你已經看出破綻了,上面比較的是兩個字串,而下面比較的是兩個物件,為什麼長的一模一樣的物件就不相等了呢?

別忘了,引用型別時按引用訪問的,換句話說就是比較兩個物件的堆記憶體中的地址是否相同,那很明顯,person1和person2在堆記憶體中地址是不同的:

這裡寫圖片描述

所以這兩個是完全不同的物件,所以返回false;

5.簡單賦值

在從一個變數向另一個變數賦值基本型別時,會在該變數上建立一個新值,然後再把該值複製到為新變數分配的位置上:

var a = 10;
var b = a;

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

此時,a中儲存的值為 10 ,當使用 a 來初始化 b 時,b 中儲存的值也為10,但b中的10與a中的是完全獨立的,該值只是a中的值的一個副本,此後,這兩個變數可以參加任何操作而相互不受影響。

這裡寫圖片描述

也就是說基本型別在賦值操作後,兩個變數是相互不受影響的。

6.物件引用

當從一個變數向另一個變數賦值引用型別的值時,同樣也會將儲存在變數中的物件的值複製一份放到為新變數分配的空間中。前面講引用型別的時候提到,儲存在變數中的是物件在堆記憶體中的地址,所以,與簡單賦值不同,這個值的副本實際上是一個指標,而這個指標指向儲存在堆記憶體的一個物件。那麼賦值操作後,兩個變數都儲存了同一個物件地址,則這兩個變數指向了同一個物件。因此,改變其中任何一個變數,都會相互影響:

var a = {}; // a儲存了一個空物件的例項
var b = a;  // a和b都指向了這個空物件

a.name = 'jozo';
console.log(a.name); // 'jozo'
console.log(b.name); // 'jozo'

b.age = 22;
console.log(b.age);// 22
console.log(a.age);// 22

console.log(a == b);// true

它們的關係如下圖:

這裡寫圖片描述

因此,引用型別的賦值其實是物件儲存在棧區地址指標的賦值,因此兩個變數指向同一個物件,任何的操作都會相互影響。

相關文章