深入理解 JavaScript 隐式类型转换机制

前言

在之前的文章[[js让人诟病的这些feature]]中，曾提出过一个关于类型转换的疑问。

起初我认为这个问题比较简单，只需记住某些特性即可，因此尝试通过穷举法来总结规律。

然而，当发现console.log(Number([])) 的结果为 0，而console.log(Number([1, 2])) 的结果为 NaN 时，这种看似混乱的现象背后必然存在深层逻辑。虽然可以通过死记硬背来应对，但作为一名追求卓越的开发者，有必要探究其根本原因。

console.log({} - {}) // NaN
console.log([] - []) // 0
console.log([] - [1, 2]) // NaN
console.log([] == ![]) // true
console.log({} == {}) // false

要理解上述打印结果，关键在于理解Number([])、Number([1, 2])、Number({}) 的值，以及Boolean([]) 返回的结果。以下将逐步展开分析。

一、包装类

Boolean()

Boolean() 转换只有两种结果：true 和 false。

• 结果为 false 的类型通常被称为 falsey（虚值）。这些值在 [[[js让人诟病的这些feature]] 中有所提及，具体包括：

0、null、undefined、false、''（空字符串）、NaN

部分文章将 -0 和 +0 视为两个不同的值，但在 Boolean 转换中它们均被视为 falsey。

上述示例均为原始值转换为原始值的情况。除此之外，其他类型的转换结果均为 true。

如果是引用类型转换为原始值，结果始终为 true。此外，还有一些引用类型可能一时难以列举。

Boolean(/d/)
Boolean(new Error())
console.log(Boolean(Symbol()))

扩展

另一种容易混淆的是 typeof 的返回结果，在 Node.js 环境中：

console.log(typeof Date())
console.log(typeof new Date()) 
console.log(Date()) // Thu Jan 13 202l2 22:29:36 GMT+0800 (中国标准时间)
console.log(new Date()) // 2022-01-13T14:29:36.660Z

Number()

引用类型转换为 Number

Number() 函数是易错点，尤其是引用类型转换为原始类型的过程。理解这一点，就能解释文章开头的例子。

只有掌握了 Number(引用类型) 的规则，才能准确判断引用类型转换为原始类型的结果，否则只能靠猜测，这显然行不通。

• 假设存在如下对象：

const obj = {
  toString() {
    return 2	
  },
  valueOf() {
    return 1	
  }
}

• 使用 Number() 包裹该对象：

console.log(Number(obj))

打印结果为 1。有趣的是，

consot obj = {
  toString() {
    return 2	
  },
  valueOf() {
    return {}
  }
}
console.log(Number(obj)) // 2

当 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() 返回的是对象，且该对象是自己重写的，则直接报错。
• 如果不是重写的，则调用 Object.prototype.toString 方法。

这里显然涉及到了[[原型链]]的问题，因此隐式转换并非想象中那么简单。

我们创建的对象通常不会定义这两个方法，因此它们显然继承自 Object。也就是说，我们在研究这个问题时，实际上是在研究Object.prototype.toString.call() 返回的值。

console.log(Object.prototype.tostring.call('123'));

console.log(Object.prototype.toString.call(123));

console.log(object.prototype.tostring.call(true));

console.log(Object.prototype.tostring.call(undefined));

console.log(Object.prototype.tostring.call(null));

console.log(Object.prototype.tostring.call(function){}));

console.log(Object.prototype.toString.call([1,2,3]));

console.log(Object.prototype.tostring.call(ff));

打印结果如下：

[object string]
[object Number]
[object Boolean]
[object Undefined]
[object Null]
[object Functionl]
[object Arrayl]
[object objectl]

原始类型转换为 Number

console.log(Number(undefined)) // NaN
console.log(Number (null)) // 0
console.log(Number(true)) // 1
console.log(Number (false)) // 0
console.log(Number(NaN)) // NaN
console.1og(Number (Infinity))// Infinity
console.log(Number('') // 0
console.log(Number(' ') // 0
console.log(Number('123')) // 123

这部分内容无需过多解释，只需记忆即可。需要注意的是，Number 的值除了常规数字外，还包括 NaN 和 Infinity。

以下混淆点需要特别注意：

console.log((123).toString()) // 123
console.log(undefined.toString()) // 报错
console.log(nul.toString()) // 报错
复制代码

undefined 和 null 没有包装类，且本身为基础类型，因此没有其他复杂方法，调用时会报错。

扩展

Arguments 和 document

console.log(Object.toString.call(argument)) // [object Argument]
console.log(Object.toString.call(document)) // [object HTMLDocument]

HTMLDocument 是浏览器提供的对象类型。

由此可知 Object.prototype.toString 方法的应用之广，其识别类型的能力远强于 typeof 简陋的返回值。当然，每种方法都有其适用场景。

手写 typeof

typeof 是 JavaScript 引擎内置的，并非语法糖。初看这道面试题时令人困惑，难道要手写 typeof 的引擎代码？或者解释从 JavaScript 第一个版本起 typeof null 返回 object 的原因？

但确实有公司考察这一点，颇具挑战性。查阅网上解析后，发现其核心是利用Object.prototype.toString.call() 返回的结果，进行字符串切割，最后返回单词部分。

这就完了？这似乎是脱裤子放屁，多此一举。

Number 转换非二进制

Number(0xfff) // 4095
Number(070) // 56

Number 可以直接识别不同进制的数字并转换为十进制。

parseInt 和 Number 的关系

Number('123abc') // NaN
Number('ad123') // NaN
Number('  123') // 123

而[[parseInt]] 很好地解决了这个问题，它可以视为 Number() 的良好补充。

parseInt('123abc') // 123
parseInt('123asd1') // 123
parseInt('ad123') // NaN
parseInt('  123') // 123

String()

Object.prototype.toString

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

const obj = {
  toString() {
    return 2	
  },
  valueOf() {
    return 1	
  }
}

当触发 String(obj) 时，其行为与 Number() 完全相反。

console.log(String(obj)) // 2

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

const obj = {
  toString() {
    return {}
  },
  valueOf() {
    return 1	
  }
}

console.log(String(obj)) // 1

但如果 toString() 返回的是引用类型，则去调用 valueOf() 方法。这与 Number() 完全相反，但也符合逻辑。

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

如果不重写，可以使用 Object.prototype.toString.call(对象)，返回值参考 Number() 部分的内容。

console.log(String({})) // [object Object]

Array.prototype.toString

这部分记忆无需多言，只需将外层的 [] 去除即可。

console.log(String([1])) // '1'
console.log(String([1, 2])) // '1, 2'
console.log(Array.prototype.toString.call([1])) // '1'
console.log(Array.prototype.toString.call([1, 2])) // '1, 2'

二、隐式转换触发规则

前面讨论了显式转换的规律，以下是触发隐式转换的规则。

运算符规则与[[运算符的优先级]]相关，此处不赘述，可自行查阅。

布尔值的隐式转换

当出现判断条件时，会发生隐式转换。

if,
switch,
while,
for(; ;),
&&,
||,
!,
!!,
? : 三元

数值的隐式转换

只要具备基础数学知识即可理解，运算符用于数字之间的计算。在 JavaScript 中，基本规则一致。

+ - * % == ~~ & | ~ ^ << <<< 等，包括位运算符、算术运算符。

隐式转换最复杂的情况

== !== >= <= < >

如下示例，也是面试高频题目。除了背诵结果，还需了解得出该结果的过程。

console.log([] == ![]) // true

个人觉得隐式转换最复杂的莫过于此例。再复杂也不过是加上优先级。回到这个例子，看似比较的是两个数组或特殊对象，实则不然。解析如下：

• 看到等号（==）比较运算符，应明白等号两边都要转换为 Number 类型。
• 从左到右，Number([])，[] 是引用类型，无法直接获取原始值。
• valueOf 无法获取值，则走Array.prototype.toString.call([])。从上文可知，它返回的是去掉 [] 后的字符串 ''。
• 此时左边变为 Number('')，因此左边返回 0。

此时题目变为0 == ![]。接下来右边的转换较为简单。

• 在 Boolean() 一节中可知，除了 falsey 外，其他均为 true。而在 ! 的作用下，[] 会进行 Boolean() 转换。
• 此时右边为 true，!true 即为 false。
• Number(false) 的结果为 0。

由上得出 0 == 0 的结果为 true。运用上述知识点可以很好地解析问题，下面的例子更加简单。

console.log({} == {}) // false
console.log({} != {})

如果按照同样的分析方式解释：

• 两边都使用 Number() 包裹。
• toString() 后均为 '[object Object]'。
• Number('[obejct Object]') 为 NaN。
• 因此最后转化为console.log(NaN == NaN) 的比较。

NaN 与任何值比较都不相等。

题目不难，但综合了较多知识点。解决这两题后，隐式转换的问题也就基本掌握。

三、特殊情况

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

console.log(1 + '2' + '2') // '122'
console.log(1 + + '2' + '2') // '32'
console.log('A' - 'B' + '2') // 'NaN2'
console.log('A' - 'B' + 2) // NaN

JavaScript 中字符串与任何数据类型相加都会转换为字符串吗？可以这么说，除了处理 symbol 类型直接报错外。

console.log(typeof (+ '2')) // number

还有 undefined 和 null 的特殊情况。

console.log(undefined == null) // true
console.log(NaN == NaN) // fasle

• NaN 的语义是 not a number，很明显，指的就是不是一个数字。
• NaN 在 typeof 中属于 number 类型，但它与任何数都不相等。

四、工作不要使用

2022 年了，我们只需要了解 == 的运行机制即可。都这个年份了，不需要再重申工作中使用 == 还是 === 的问题了吧。

总结

到此这篇关于 JS 隐式转换的文章就介绍到这了，更多相关 JS 的隐式转换内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！