JavaScript 基本類型的裝箱與拆箱

在JavaScript中,有時候會遇到如下兩種狀況
  1. 基本類型的變量, 直接調用方法

    var item = 1234
     item.toString() // '1234'
    
     var num = 123;
     num.toFixed(2) // '123.00'複製代碼
衆所周知只有Object類型纔有方法,那上述代碼基本類型爲何也能夠調用方法,其中涉及到JavaScript的裝箱。

裝箱的概念:把基本類型轉化爲相應的對象。而裝箱又分爲顯式與隱式bash

上述代碼就是典型的隱式裝箱:

  1. 讀取基本類型的值,後臺建立一個臨時的該基本類型所對應的對象。
  2. 對基本類型調用方法,實際是在該基本類型的對象上調用方法。
  3. 執行方法後該對象立馬銷燬。

    var item = 1234
     item.toString() // '1234'
     // 此代碼等價於
     var item = new Number(1234);
     item.toString();
     
     var num = 1234;
     num.toFixed(2) // '1234.00'
     // 此代碼等價於
     var num = new Number(1234)
     num.toFiexed(2)複製代碼

顯式裝箱:用內置對象例如Number、Boolean、String、Object等 對基本類型進行顯式裝箱

var bool = new Boolean(true)
var Str = new String('123')複製代碼

2.把引用類型的值當作基本類型的值來使用,這裏面涉及到拆箱操做,拆箱是把引用類型轉化爲基本類型

var num = [1, 2, 3, 4]
var obj = {
    name: 'wsd'
}
console.log(num + 1) // 1,21
console.log(str.toString()) // [object Object]複製代碼

      拆箱內部過程是調用了一個抽象方法toPrimitive(val, type),該方法第一個參數接收轉換的參數,第二個參數非必須,爲對象被期待轉換的類型。
     這個方法的本質是:
  1. 若是val是object,則會先執行valueOf()方法,若是結果爲原始值,則返回此結果;
  2. 不然再調用tostring方法;若是得出結果爲原始值,則返回結果,不然拋出異常

    var num = [1, 2, 3, 4]
    console.log(num + 1) // 1,21
    
    //先執行valueOf()方法
    num.valueOf() //  [1, 2, 3, 4]
    
    //結果不是原始值,再調用toString方法
    num.valueOf().toString() // 1,2,3,4
    
    // 獲得基本類型數據
    console(num + 1)   //  '1,2,3,4' + 1 = '1,2,3,41'複製代碼
相關文章
相關標籤/搜索