• 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
  • 相关阅读:
    线上问诊:可视化展示
    MySQL数据库:6、约束的概述及语法
    laravel-admin的3个开发细节调整
    浅谈前后端分离的网络拓扑
    SQLite—免费开源数据库系列文章目录
    线段树C++详细讲解和个人见解
    MinIO - 站点复制 Site Replication
    3. 无重复字符的最长子串
    【STM32】标准库-看门狗
    强化学习:A2C求解MountainCar-v0小车上山问题
  • 原文地址:https://blog.csdn.net/weixin_49035434/article/details/125571903