• JS的装箱和拆箱


    装箱转换

    每一种基本类型Number、String、Boolean、Symbol在对象中都有对应的类,所谓装箱转换,正是把基本类型转换为对应的对象,它是类型转换中一种相当重要的种类。

    前文提到,全局的 Symbol 函数无法使用 new 来调用,但我们仍可以利用装箱机制来得到一个 Symbol 对象,我们可以利用一个函数的call方法来强迫产生装箱。

    我们定义一个函数,函数里面只有return this,然后我们调用函数的call方法到一个Symbol类型的值上,这样就会产生一个symbolObject。

    我们可以用console.log看一下这个东西的type of,它的值是object,我们使用symbolObject instanceof 可以看到,它是Symbol这个类的实例,我们找它的constructor也是等于Symbol的,所以我们无论从哪个角度看,它都是Symbol装箱过的对象:

    1. var symbolObject = (function(){ return this; }).call(Symbol("a"));
    2. console.log(typeof symbolObject); //object
    3. console.log(symbolObject instanceof Symbol); //true
    4. console.log(symbolObject.constructor == Symbol); //true

    装箱机制会频繁产生临时对象,在一些对性能要求较高的场景下,我们应该尽量避免对基本类型做装箱转换。

    使用内置的 Object 函数,我们可以在JavaScript代码中显式调用装箱能力。

    1. var symbolObject = Object(Symbol("a"));
    2. console.log(typeof symbolObject); //object
    3. console.log(symbolObject instanceof Symbol); //true
    4. console.log(symbolObject.constructor == Symbol); //true

    每一类装箱对象皆有私有的 Class 属性,这些属性可以用 Object.prototype.toString 获取:

    1. var symbolObject = Object(Symbol("a"));
    2. console.log(Object.prototype.toString.call(symbolObject)); //[object Symbol]

    在 JavaScript 中,没有任何方法可以更改私有的 Class 属性,因此Object.prototype.toString 是可以准确识别对象对应的基本类型的方法,它比 instanceof 更加准确。

    但需要注意的是,call本身会产生装箱操作,所以需要配合 typeof 来区分基本类型还是对象类型。

    拆箱转换

    在JavaScript标准中,规定了 ToPrimitive 函数,它是对象类型到基本类型的转换(即,拆箱转换)。

    对象到 String 和 Number 的转换都遵循“先拆箱再转换”的规则。通过拆箱转换,把对象变成基本类型,再从基本类型转换为对应的 String 或者 Number。

    拆箱转换会尝试调用 valueOf 和 toString 来获得拆箱后的基本类型。如果 valueOf 和 toString 都不存在,或者没有返回基本类型,则会产生类型错误 TypeError。

    1. var o = {
    2. valueOf : () => {console.log("valueOf"); return {}},
    3. toString : () => {console.log("toString"); return {}}
    4. }
    5. o * 2
    6. // valueOf
    7. // toString
    8. // TypeError

    我们定义了一个对象o,o有valueOf和toString两个方法,这两个方法都返回一个对象,然后我们进行o*2这个运算的时候,你会看见先执行了valueOf,接下来是toString,最后抛出了一个TypeError,这就说明了这个拆箱转换失败了。

    到 String 的拆箱转换会优先调用 toString。我们把刚才的运算从o*2换成 String(o),那么你会看到调用顺序就变了。

    1. var o = {
    2. valueOf : () => {console.log("valueOf"); return {}},
    3. toString : () => {console.log("toString"); return {}}
    4. }
    5. String(o)
    6. // toString
    7. // valueOf
    8. // TypeError

    在 ES6 之后,还允许对象通过显式指定 @@toPrimitive Symbol 来覆盖原有的行为。

    1. var o = {
    2. valueOf : () => {console.log("valueOf"); return {}},
    3. toString : () => {console.log("toString"); return {}}
    4. }
    5. o[Symbol.toPrimitive] = () => {console.log("toPrimitive"); return "hello"}
    6. console.log(o + "")
    7. // toPrimitive
    8. // hello
  • 相关阅读:
    【I/O方式——程序中断】
    TC277的Ovc功能
    2022“杭电杯”中国大学生算法设计超级联赛(3)
    深度学习之wandb的基本使用
    简历可能会问的问题(学习笔记)
    Salesforce-Visualforce-4.标准控制器(Standard Controller)
    开启十日内 阿维塔11首批用户锁单突破5000台
    巡检自动化=selenium+截图+接口
    Ubuntu 使用 nginx 搭建 https 文件服务器
    谁删了服务器?谈VC源码字符集和回车换行注意事项
  • 原文地址:https://blog.csdn.net/weixin_49035434/article/details/125571903