美文网首页
JavaScript中的装箱与拆箱

JavaScript中的装箱与拆箱

作者: 夏日冰红茶 | 来源:发表于2022-11-13 00:23 被阅读0次

    JS中数据类型可以分为两大类:基本类型与引用类型
    其中基本类型包括:字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、Symbol。
    引用类型包括:数组(Array)、对象(Object)、函数(Function)。
    在JS中,有四个基本的包装类型String、Number、Boolean、Symbol。

    一、装箱操作

    概念:将基本数据类型转换成相应的引用类型的操作。装箱操作分为隐式装箱与显式装箱两种类型。
    1、隐式装箱:如下例

      var str1="hello world"  //隐式装箱
      var str2=str1.substring(2);
    

    上面的代码执行步骤是这样的:

      <1> 创建String类型的一个实例;
      <2> 在实例中调用制定的方法
      <3> 销毁这个实例。
    

    用代码实现是这样的:

     var str1 = new String('person');
     var str2=str1.substring(2);
     str1 = null;
    

    所以,我们在基本类型值上可以使用方法(比如string的substring等),是因为有「隐式装箱」操作。

    隐式装箱当读取一个基本类型值时,后台会创建一个该基本类型所对应的基本包装类型对象。在这个基本类型的对象上调用方法,其实就是在这个基本类型对象上调用方法。这个基本包装类型的对象是临时的,它只存在于方法调用那一行代码执行的瞬间,执行方法后立即被销毁。这也是在基本类型上添加属性和方法会不识别或报错的原因了。

    2、显式装箱:通过基本包装类型对象对基本类型进行显式装箱,如下例:

      var str = new String('person');
    

    显式装箱的操纵可以对new出来的对象进行属性和方法的添加啦,因为通过new操作符创建的引用类型的实例,在执行流离开当前作用域之前一直保留在内存中。

    var objStr = new String('person');
        objStr.name = 'Lily';
        objStr.action = function(){
             console.log('how are you');
     }
    console.log(objStr.name); // Lily
    objStr.action(); // how are you
    

    注意:显式装箱可以添加属性和方法的,隐式装箱是不能添加属性和方法的。

    二、拆箱操作

    概念:把引用类型转换成基本的数据类型。通常通过引用类型的valueOf()和toString()方法来实现。toString() 返回字符串,valueOf() 返回对象本身。

    在下面的代码中,留意下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 基本的数据类型,想要的
    

    参考资料:
    https://juejin.cn/post/6844903859765133320
    https://mp.weixin.qq.com/s/QDHJBCP9E8GyKPlMOExwAA

    相关文章

      网友评论

          本文标题:JavaScript中的装箱与拆箱

          本文链接:https://www.haomeiwen.com/subject/hjokxdtx.html