js装箱和拆箱
奇怪的现象
我们在基本类型上(如“hello”)可以访问属性和方法(hello.length);但基本类型并不支持属性和方法设置。能这样做的原因是因为引擎内部做了装箱和拆箱操作
例子
var item = 1234
item.toString() // '1234'
var num = 123;
num.toFixed(2) // '123.00'
我们知道Object类型才会方法,那么上述为什么可以调用??就是因为js进行了装箱操作
装箱
概念:把基本类型转化为相应的对象。而装箱又分为显式与隐式
隐式装箱
上面的例子就是隐式装箱
隐式装箱过程
- 读取基本类型的值,后台创建一个临时的该基本类型所对应的对象。
- 对基本类型调用方法,实际是在该基本类型的对象上调用方法。
- 执行方法后该对象立马销毁。
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),该方法第一个参数接收转换的参数,第二个参数非必须,为对象被期待转换的类型。
这个方法的本质是:
- 如果val是object,则会先执行valueOf()方法,如果结果为原始值,则返回此结果
- 否则再调用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'
为什么要这么做呢?
- 方便。操作基本类性值的场景还是比较多的。如果每次为了使用属性或者调用方法之前都要包装一次,未免太过麻烦。
- 省内存。大家知道存储同一个数据(比如 new Number(1) 和 1 ),对象对内存的开销比基本类型值要大。有了拆装箱的操作,我们只在使用的时候暂时包装成对象访问,其余时间还是以基本类型值的形式存在,能够节省不少的内存
null/undefined 没有对应的包装函数
JS 当前一共有 7 种基本类型值:字符串、数值、大整数(bigint)、布尔、Symbol、null 还有 undefined.
除了 null 和 undefined 之外,其他基本类型都要对应的包装函数。因此在 null 和 undefined 上访问属性是会报错的。
这也是能够理解的,undefined 表示变量未初始化,null 表示变量为空。两者都没有什么实际的数据意义,因此没有对应的包装函数。
可能发生隐式类型转换的场景以及转换原则,应如何避免或巧妙应用
场景
- +运算符
- / - * 强制将其他类型转化为数字类型
- == 宽松 (loose equals ) 类型转换
转换规则
隐式强制类型转换为布尔值
- if(...)语句中的条件判断表达式
- for(...;...;...)语句中的条件判断表达式(第二个)
- while(...) 和 do...while(...) 循环中的条件判断表达式
- ?: 中的条件判断表达式
- 逻辑运算符 || 和 && 左边的操作数
类型 | 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 | 装箱操作 | 装箱操作 | 装箱操作 | 装箱操作 | - |
注意
编码时应尽可能地将类型转换表达清楚,以免给别人留坑。类型转换越清晰,代码可读性越高,更容易理解。