看破JS底层——实现a==1、2、3
分类:javascript
-
写在前面
假如我和你说
a == 1 && a == 2 && a == 3
结果为true
你会怎么看?或许你会怀疑,a怎么可能同时为3个值?!但是它确实是存在的!今天,就让我为你们揭开这层神秘的面纱!
-
底层核心
如果真的想要搞懂如何实现
a == 1 && a == 2 && a == 3
,那么我们首先就要搞清楚,在实现a == 1
的背后,JS究竟做了哪些工作?接下来我们看一段代码
const a = { value:1 } console.log(a == 1)
很多人第一眼或许会认为这是
true
,但是我可以很负责的和你说结果是false
!在这里我们要清楚的认知到,value=1
只是a的一个属性,并不等于a本身。接下来我们再看一段代码:const a = { value: 1, valueOf() { return this.value } } console.log(a == 1) //true
为什么加了一个valueOf这里就为
true
了?说到这,我们就有必要了解一下==
的背后,核心原理是啥。在进行数据类型转换时候,复杂数据类型转变为简单数据类型一共发生了4步引用自三元博客
对象转原始类型是根据什么流程运行的? 对象转原始类型,会调用内置的[ToPrimitive]函数,对于该函数而言,其逻辑如下: 1. 如果有Symbol.toPrimitive()方法,优先调用再返回 2. 调用valueOf(),如果转换为原始类型,则返回 3. 调用toString(),如果转换为原始类型,则返回 4. 如果都没有返回原始类型,会报错
-
实现过程
所以想要实现文章开头的
a == 1 && a == 2 && a == 3
,我们只需要简单对其进行应用,复写其中一个方法就可以实现了。
代码如下:var a = { // 设置默认值为0 value: 0, // 复写valueOf方法 valueOf() { // 每次自增,让value慢慢增加 this.value++; return this.value; } } console.log(a == 1 && a == 2 && a == 3);//true
-
写在最后
在这我们需要牢记对象转原始类型是根据什么流程运行的?
对象转原始类型,会调用内置的[ToPrimitive]函数,对于该函数而言,其逻辑如下:
1. 如果有Symbol.toPrimitive()方法,优先调用再返回
2. 调用valueOf(),如果转换为原始类型,则返回
3. 调用toString(),如果转换为原始类型,则返回
4. 如果都没有返回原始类型,会报错
我是江河,前端实习生一枚,欢迎各位大佬滴滴,文章如有不正之处敬请斧正!