美文网首页js
js装箱和拆箱

js装箱和拆箱

作者: 书虫和泰迪熊 | 来源:发表于2020-04-11 13:35 被阅读0次

奇怪的现象
我们在基本类型上(如“hello”)可以访问属性和方法(hello.length);但基本类型并不支持属性和方法设置。能这样做的原因是因为引擎内部做了装箱和拆箱操作

例子

var item = 1234
item.toString() // '1234'
var num = 123;
num.toFixed(2) // '123.00'

我们知道Object类型才会方法,那么上述为什么可以调用??就是因为js进行了装箱操作

装箱

概念:把基本类型转化为相应的对象。而装箱又分为显式与隐式

隐式装箱
上面的例子就是隐式装箱
隐式装箱过程

  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')

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

拆箱

概念:就是把包装对象转为对应的原始类型值表现形式。

// 将 new Number 拆箱成 1234.236
new Number(num).valueOf() // 1234.236
// 将 new String 拆箱成 Hello
new String(num).valueOf()

拆箱内部过程是调用了一个抽象方法toPrimitive(val, type),该方法第一个参数接收转换的参数,第二个参数非必须,为对象被期待转换的类型。
这个方法的本质是:

  1. 如果val是object,则会先执行valueOf()方法,如果结果为原始值,则返回此结果
  2. 否则再调用tostring方法;如果得出结果为原始值,则返回结果,否则抛出异常

var num = [1, 2, 3, 4]
console.log(num + 1) // 1,2,3,41
//先执行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'

为什么要这么做呢?

  1. 方便。操作基本类性值的场景还是比较多的。如果每次为了使用属性或者调用方法之前都要包装一次,未免太过麻烦。
  2. 省内存。大家知道存储同一个数据(比如 new Number(1) 和 1 ),对象对内存的开销比基本类型值要大。有了拆装箱的操作,我们只在使用的时候暂时包装成对象访问,其余时间还是以基本类型值的形式存在,能够节省不少的内存

null/undefined 没有对应的包装函数

JS 当前一共有 7 种基本类型值:字符串、数值、大整数(bigint)、布尔、Symbol、null 还有 undefined.
除了 null 和 undefined 之外,其他基本类型都要对应的包装函数。因此在 null 和 undefined 上访问属性是会报错的。

这也是能够理解的,undefined 表示变量未初始化,null 表示变量为空。两者都没有什么实际的数据意义,因此没有对应的包装函数。

可能发生隐式类型转换的场景以及转换原则,应如何避免或巧妙应用

场景

  1. +运算符
  2. / - * 强制将其他类型转化为数字类型
  3. == 宽松 (loose equals ) 类型转换

转换规则
隐式强制类型转换为布尔值

  1. if(...)语句中的条件判断表达式
  2. for(...;...;...)语句中的条件判断表达式(第二个)
  3. while(...) 和 do...while(...) 循环中的条件判断表达式
  4. ?: 中的条件判断表达式
  5. 逻辑运算符 || 和 && 左边的操作数
类型 Null Undefined Boolean(true/false) Number String Symbol Object
Boolean false false - [0, NaN] - false true ''-false true" true true
Number 0 NaN 1/0 - StringToNumber 拆箱操作
String 'null' 'undefined' 'true'/'false' NumberToString - TypeError 拆箱操作
Object TypeError TypeError 装箱操作 装箱操作 装箱操作 装箱操作 -

注意
编码时应尽可能地将类型转换表达清楚,以免给别人留坑。类型转换越清晰,代码可读性越高,更容易理解。

相关文章

网友评论

    本文标题:js装箱和拆箱

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