談談JavaScript中裝箱和拆箱

在JavaScript裏面有個引用類型叫作基本包裝類型，它包括String、Number和Boolean。那麼它和基本的類型String、Number和Boolean是啥關係呢？接着往下看👀

裝箱操做

所謂的裝箱，是指將基本數據類型轉換爲對應的引用類型的操做。而裝箱又分爲隱式裝箱和顯式裝箱。

隱式裝箱

對於隱式裝箱，咱們看下下面的代碼：

var s1 = 'call_me_R'; // 隱式裝箱
var s2 = s1.substring(2);
複製代碼

上面代碼的執行步驟實際上是這樣的：

1. 建立String類型的一個實例；
2. 在實例中調用制定的方法；
3. 銷燬這個實例。

上面的三個步驟轉換爲代碼，以下：

# 1
var s1 = new String('call_me_R');
# 2
var s2 = s1.substring(2);
# 3
s1 = null;
複製代碼

隱式裝箱當讀取一個基本類型值時，後臺會建立一個該基本類型所對應的基本包裝類型對象。在這個基本類型的對象上調用方法，其實就是在這個基本類型對象上調用方法。這個基本類型的對象是臨時的，它只存在於方法調用那一行代碼執行的瞬間，執行方法後當即被銷燬。這也是在基本類型上添加屬性和方法會不識別或報錯的緣由了，以下：

var s1 = 'call_me_R';
s1.job = 'frontend engineer';
s1.sayHello = function(){
	console.log('hello kitty');
}
console.log(s1.job); // undefined
s1.sayHello(); // Uncaught TypeError: s1.sayHello is not a function
複製代碼

顯示裝箱

裝箱的另外一種方式是顯示裝箱，這個就比較好理解了，這是經過基本包裝類型對象對基本類型進行顯示裝箱，以下：

var name = new String('call_me_R');
複製代碼

顯示裝箱的操縱能夠對new出來的對象進行屬性和方法的添加啦，由於經過經過new操做符建立的引用類型的實例，在執行流離開當前做用域以前一直保留在內存中。

var objStr = new String('call_me_R');
objStr.job = 'frontend engineer';
objStr.sayHi = function(){
	console.log('hello kitty');
}
console.log(objStr.job); // frontend engineer
objStr.sayHi(); // hello kitty
複製代碼

拆箱操做

拆箱就和裝箱相反了。拆箱是指把引用類型轉換成基本的數據類型。一般經過引用類型的valueOf()和toString()方法來實現。

在下面的代碼中，留意下valueOf()和toString()返回值的區別：

var objNum = new Number(64);
var objStr = new String('64');
console.log(typeof objNum); // object
console.log(typeof objStr); // object
# 拆箱
console.log(typeof objNum.valueOf()); // number 基本的數字類型，想要的
console.log(typeof objNum.toString()); // string 基本的字符類型，不想要的
console.log(typeof objStr.valueOf()); // string 基本的數據類型，不想要的
console.log(typeof objStr.toString()); // string 基本的數據類型，想要的
複製代碼

因此，在進行拆箱操做的過程當中，還得結合下實際的狀況進行拆箱，別盲目來 -- 吃力不討好就很尷尬了😅

後話

文章首發： github.com/reng99/blog…

更多內容：github.com/reng99/blog…

參考

JavaScript 基本類型的裝箱與拆箱

《JavaScript高級程序設計》