js类型转换之引用类型+引用类型=？？？

程序员文章站 2023-12-21 14:02:22

...

//判断下面语句的输出结果
console.log({}+{});
console.log([]+[])
console.log({}+[])
console.log(function(){}+function(){})

首先淡定地来句：卧槽，怎么还有这些奇奇怪怪的操作，对象相加？没错，我也哭了！那么我们先来解析一下；

先把这类题的规律丢在这儿：
两个引用类型相加，会将操作数一个一个转为数字或者字符串再做加法运算；

可能你会问，这怎么转？没错，我也问过，哈哈哈

是这样的：
js里的引用类型默认继承了Object类，这个类里有两个方法：
①valueOf ②toString
在转换过程中会先查看valueOf方法的返回值，如果是数字或者字符串直接调用；
如果是其他类型，再看toString方法，如果是数字或者字符串则直接调用；
当两个函数的返回值都不是数字或者字符串，直接报错
【转换后的值就是对应调用函数的返回值】

好了，然后我们来看下题目的结果：
js类型转换之引用类型+引用类型=？？？
解析：

1.{}+{}

首先查看第一个{}的valueOf方法，返回的是一个空对象，并不是数字或者字符串；所以查看toString方法，toString方法返回了一个[Object object]的字符串;第二个操作数{}也一样。相加等同于字符串拼接，因而第一题答案为：
[Object object][Object object]

2.[]+[]
首先查看第一个 [] 的valueOf方法，返回的是一个空数组（因为数组重写了valueOf方法），并不是数字或者字符串；所以查看toString方法，toString方法返回了一个空 (数组也重写了toString方法) 的字符串;第二个操作数{}也一样；相加等同于字符串拼接，而第一题答案为：
空字符串

3.{}+[]
经过上面的分析，这应该没问题了吧；
第一个操作数 {} 对应返回 [Object object],第二个操作数返回空字符串，因此结果是
[Object object]

4.function(){}+function(){}
都是一样的道理
function也重写了valueOf和toString,返回值分别为函数和定义function模板的字符串；因此操作数转换后返回字符串
‘fuction(){}’,相加等同于字符串拼接答案为字符串
function(){}function(){}

最后，大家可以去写自己的类，重写valueOf和toString,慢慢测试，看看各种结果；
丢个迷人的东西，比valueOf和toString优先级高的还有一个叫做
Symbol.toPrimitive](){}的东西；你可以这样玩耍

 class  My{
     constructor(name) {
         this.name=name;
     }
     [Symbol.toPrimitive](){
         return 10;
     };
     valueOf=function (){
         return 100;
     }

     toString=function (){
         return 'abcd'
     }

 }

 let obj=new My('zs');
 console.log(obj+obj)

如有错误，请大伙儿及时纠正

相关标签：前端笔记 javascript es6

js类型转换之引用类型+引用类型=？？？