JS里面的装箱和拆箱操作

152 阅读3分钟

装箱:把基本数据类型转换为对应的引用数据类型的操作

当我们读取一个基本类型的时候,后台就会创建一个对应的基本包装类型对象,从而让我们能够调用一些方法来操作这些数据

var s = 'qwer'
var s1 = s.indexOf('a')

变量s 是一个基本类型,它不是对象,它不应该有方法,js为我们做了一系列处理(装箱),使得我们可以调用方法这就是 隐式装箱操作

// 类似操作
let str = 'str'
let str1 = new String('str')
let str2 = str1.indexOf('s')
// 销毁掉 str1

**显示装箱操作
**

let str = new String('str')
let str1 = str.indexOf('s')

拆箱:将引用类型对象转换为对应的值类型对象

主要通过valueOf() 或者toString() 方法来实现拆箱操作。这两个方法主要用来监测返回的值是不是一个基本类型的值。

valueOf()

1.valueOf() 方法返回指定对象的原始值。
2.JavaScript调用valueOf方法将对象转换为原始值。你很少需要自己调用valueOf方法;当遇到要预期的原始值的对象时,JavaScript会自动调用它。
3.默认情况下,valueOf方法由Object后面的每个对象继承。 每个内置的核心对象都会覆盖此方法以返回适当的值。如果对象没有原始值,则valueOf将返回对象本身。
4.JavaScript的许多内置对象都重写了该函数,以实现更适合自身的功能需要。因此,不同类型对象的valueOf()方法的返回值和返回值类型均可能不同

toString()

1.toString() 方法返回一个表示该对象的字符串。
2.每个对象都有一个 toString() 方法,当该对象被表示为一个文本值时,或者一个对象以预期的字符串方式引用时自动调用。
3.默认情况下,toString() 方法被每个 Object 对象继承。如果此方法在自定义对象中未被覆盖,toString() 返回 “[object type]”,其中 type 是对象的类型。



[]+[]	//""
{}+{}	//"[object Object][object Object]"
[]+{}	//"[object Object]"
{}+[]	// 0

如上面代码所示,右边注释的是其对应的结果,下面逐个分析其中的原理:
(1)[]+[],[]自身是一个空数组,即是一个对象,[]会先被valueOf()检测返回自身,还是[],然后使用toString()检测返回空字符"",实际最终是""+"",所以最终结果还是一个""。
(2){}+{},在js中{}可以表示一个代码块,也可以表示一个对象。在此处作为一个对象来运算,({}).valueOf()检测结果为自身,继续检测,({}).toString()检测结果为"[object Object]",所以{}+{}相当于"[object Object]"+"[object Object]",故结果为"[object Object][object Object]"。
(3)[]+{},从上面分析可以知道,这个相当于""+"[object Object]",所以结果为"[object Object]"。
(4){}+[],上面三个或许大多数人都能明白,但这个估计就会有人有疑问了,为什么会是0呢?首先,这里的{}被当做了代码块,由于编译原理底层一些机制,会涉及到词法分析、语法分析、语义分析、代码生成这些知识,这里+[]相当于+"",因为运算符+的原因,会将+""隐式转换为+0,所以结果最终为0。