js的隐式转化是怎样的(JS,开发技术)

之前写过一篇文章[[js让人诟病的这些feature]]中提出过一个疑问.

这个问题一开始我想简单了.认为只要记住一些特性就可以了.所以直接用穷举法来进行规律的总结.

但是当遇到console.log(Number([])) 的结果是0, 而console.log(Number([1, 2])) 的结果是NaN.都什么乱七八糟的,里面必有蹊跷.虽然能够强背背下来, 但是作为一个有追求的程序员还是要弄明白它是怎么一回事的.

要理解上面打印的结果,就是要理解Number([]) 的值,Number([1, 2])的值, Number({})的值, 以及Boolean([])返回的值. 下面慢慢说道.

Boolean只有两种结果,true和false.

Boolean结果为false的类型,我们通常称他为 falsey, 中文叫虚值. 这些值在 [[[js让人诟病的这些feature]] 有所提及,即,

0、null、undefined、false、''、NaN

有些文章把-0和+0算成两个

上面这些都是原始值转原始值.其他的都是true

如果是引用值转原始值都为true. 还有下面这些一时间想不起来的引用类型.

还有一种容易弄混的typeof 返回结果, node环境中:

易错点出现在Number() 上面. 尤其是引用类型转化为原始类型. 了解了这个,开头的例子就能够理解了.

我们只有在知道了Number(引用类型)的规则才能够判断引用类型转化为原始类型的结果什么,不然是不可能判断得出的饿,靠猜走不远.

我们假设有如下这么一个对象

我们Number()包裹它

打印出的结果是1. 哦,有意思的来了,

让我们让valueOf 返回的值是对象的时候, 打印出 2 , 反之则直接打印出String原始值,再转化为number类型.

一般来说valueof 就是代表值,没有意义,也不用处理. 值是什么就是什么,比如说[1, 2, 3].valueOf() 直接打印就是[1, 2, 3].

我们也可以通过这个方法来解决[[让 a == 1 && a == 2 && a == 3 成立]]的问题.

所以我们很容易得出这么一个规律: 当valueOf 返回值是引用类型的时候, 就去拿toString 返回的值. 展开来说就是:

如果valueOf返回原始值,就Number包装之后返回

如果valueOf返回的对象,就去toString()方法中找

如果toString() 返回原始值,就Number包装之后返回

如果toString()返回的是对象,且是自己重写的.那么就直接报错

如果不是充血的,那么就调用Obejct.prototye.toString方法

这里显然还涉及到了[[原型链]]的问题,所以说其实隐式转化的问题不是想象中的那么简单的.

而我们创建的对象基本没讲过会创建这两个方法.所以它很显然就是继承至Object上面的方法. 也就是说,我们在研究这个问题的是,就是在研究Object.prototype.toString.call() 返回的值.

打印的结果如下:

上面没啥好说的, 背下就行. 需要注意的是Number的值,除了我们平时使用的的数字意义之外,还有NaN、Infinity.

undefined 和 null 没有包装类, 本身又是基础类型 ,自然没有其他乱码七糟的方法. 所以报错.

Argument和document

HTMLDocument是浏览器给我们提供的对象类型.

由此也可以得知Object.prototype.toString 方法的运用之广, 识别类型之多, 比起typeof 简陋的返回值强大得多. 当然每个都有每个使用的场景就是了.

手写typeof

typeof是jscore自带,而且也不是语法糖. 我一开始看到这个面试题的时候是懵逼的. 难道要手写typeof的引擎代码? 解释一下从js第一个版本就存在的typeof null为object吗?

但是还真有公司考这个, 有点睿智,大聪明. 所以我看了看网上别人对于这的解析... 就是利用Object.prototype.toString.call()返回的结果,在进行字符串的切割,之后后面那个单词返回出去.

就这? 脱裤子放屁,多此一举.

Number转化非二进制

Number可以直接识别不同位数转化成十进制.

parseInt和Number关系

而[[parseInt]]就很好的解决了这个问题,它可以说是对于Number()很好的一个补充

对于String()的使用依旧使用Number()使用的例子

当我触发String(obj)的时候,就和Number()完全相反.

直接访问的是toString()方法.

但是如果toString() 返回的是引用类型的话, 就往valueOf()方法上面找. 可以说和Number()的完全相反,但是也符合情理 .

通过重写toString()和valueOf()的方法来了解内部的运行规则是一种很好的方式.

如果不重写的话,Object.prototype.toString.call(对象), 返回值参看Number()部分的内容.

这个记忆上没啥好说的, 直接把外面的[]给拆了就行.

前面说了显示转化的规律. 下面是能够触发隐式转化的规则.

和运算符规则是和[[运算符的优先级]],在这里不提,可自行查阅.

当出现判断的时候,会出现隐式转化.

只要有小学的知识都知道运算符,它是用于数字之间的计算的.在JavaScript中也是基本是一样的.

+ - * % == ~~ & | ~ ^ << <<< 等, 位运算符 、算术运算符

== !== >= <= < >

如下例子, 也是面试的高频题目,背下来之余,还是要知道得到这样结果的过程.

个人觉得隐式转化最复杂的就是这个例子了.再复杂大不了加上优先级. 回到这个例子中, 看似比较的是两个数组,或者说两个特殊对象.其实不全是.来解析这个例子:

看到 等号 这个比较运算法就应该明白 等号 两边都要转化成Number类型

从左到右的话,Number([]), [] 是引用类型,无法直接拿到原始值

valueOf拿不到值,就走Array.prototype.toString.call([]).从上面可以知道, 它返回的是去掉[],即字符串''.

此时左边为Number(''). 所以左边返回的自然是0.

此时这个题目为0 == ![]. 接下来右边的转化,这就简单了.

在Boolean()一节当中,就可以知道,除了falsey之外,其他都是ture.而此时在!的加持下,[]会进行Boolean()

此时右边为true. !true就为false

Number(false)的结果为0

由上而得出 0 == 0 的结果为true.运用上面的知识点可以很好的解析问题,下面的这个例子就更加简单了.

如果按照一样的分析方式来解释的话:

两边都Number()包裹住.

toString()之后都是[obejct Object]

Number('[obejct Object]') 为NaN

所以最后转化为console.log(NaN == NaN)的比较

NaN和任何一个值比较都不想等

题目不难,但是综合的东西还是有一点的. 这两题解决了,隐式转化的问题也就到头了

最容易记住的就是字符串运算符.

js 字符串和任何数据类型想加都转化为字符串么?可以这么说,处理symbol类型直接报错之外.

还有下面undfined和null的特殊情况

NaN的语意是not a number,很明显了,指的就不是一个数字

NaN在typeof中是number类型,但是它和任何数都不想.