Javascript中类型知识和valueOf()和toString()方法

2020-09-03

前言：

在JAVAscript这门语言中有两个比较重要的方法。毫不夸张的说，前端小伙伴天天在用他们。熟悉 JavaScript这门语言的小伙伴肯定知道Javascript中两个非常重要的概念：原型和原型链。valueOf和toString两个方法便是定义在Object原型对象身上的两个方法。

先来打印一下这个对象：

console.log(Object.prototype)

这就意味着，在Javascript中每个对象都可以调用这两个方法。简单介绍了这两上方法之后，我们再来看几个相关的概念：包装对象和类型转换

包装对象：

在Javascript中有六种数据类型（在ES6又增加了Symbol类型，本文暂不涉及）：

数值：number
字符串：string
布尔：boolean
undefined
null
对象

其中，number、string、boolean称为原始类型的值（primitive type），对象称为合成类型的值。对于对象来说我们可以通过点运算符或者方括号运算符的方式来调用属性或者方法。对于原始类型却不能这操作，因为他们不对象类型，但在开发中我们却经常看到一些写法，如：

var name = 'this is name'
console.log(name.length) // 12

对于上面代码，name是一个string类型的，用typeof可以看出：

typeof name // string

这是为什么呢？答案就是因为Javascript为我们提供了几个包装对象：Number、String 、Boolean，这三个包装对象在一定的条件下会把原始类型的值转成对象类型的值。

先来看一下Number：

同理，String和Boolean也是一样的操作，小伙伴私下可以试一下把不同的值转成String和Boolean

var num = new Number('123')
typeof num // 'object' 
// 可以看出num已经成为一个对象类型的数据

那么可以用原始类型的值调用属性或者是方法的过程就是因为原始对象借助包装对象自动转成了对象，过程如下：

创建一个临时的对象
调用这个对象的属性或者方法
把这个临时的对象自动销毁

看个经典的面试题：

var str = 'name'
str.hello = 'hello'
console.log(str.hello + ' world') // 打印出什么？？

再来看一下类型转换的概念

类型转换：

Javascript是一种弱类型的语言，一个变量的类型不是一成不变的，有可能上行代码是number类型，下一行代码就成了string类型的。有可能就出现两个不同类型的数据进行运算了，如：

'100' - 99 // 1

这两个字符串类型的值，也是可以进行数值运算的，运算结果是1，这就说明在运算的时候发生的类型转换，字符串转成了数值，然后再进行运算：100 - 99 = 1

在处理类型转换的时候，javascript提供了两种方式：强制类型转换和自动转换

强制类型转换：

通过Number()、String()和Boolean()三个函数来完成，咦~~怎么和前面的包装对象差不多呢，哈哈，其实就是同一个函数，当这三个函数被当成构造函数使用的时候，即使用new关键字的时候，就是把原始值转成对象；当函数作为普通函数的时候就是把原始值强制转成所对应的值。

自动类型转换：

经常遇到自动转换的两种情况，当然还有其它情况，这里不一一列举了

运算符两边数据类型不一样

99 + '1' // 991

非布尔值求布尔值

var str = 'abc'
if (str) {
  console.log('true')
} else {
  console.log('false')
}// 运算结果是：'true'

那么问题来了，自动转换的规则是什么呢~

以Number转换为例：对于原始类型转有Number比较简单，记住那几种情况就好了。对于合成类型是怎么做的呢？这就用了前面说过的 valueOf 和 toString 两个方法了。

当Number函数要把一个对象转成数值的时候：

调用对象的valueOf方法，如果方法返回是一个原始值，则直接通过Number函数转。不再往后判断
如果valueOf方法返回的是一个对象，则继续调用toString方法，如果返回一个原始值，则直接通过Number函数转
如果valueOf和toString都返回是对象，则直接报错

分几种情况来看一下：

// 重写对象的valueOf和toString方法
var obj = {  valueOf: function () {
    console.log('调用valueOf方法')
    return 1
  },  toString: function () {
    console.log('调用toString方法')
    return 2
  },}var result = 1 + obj // 调用valueOf方法
console.log(result) // 2

// 只重写对象的valueOf方法
var obj = {  valueOf: function () {
    console.log('调用valueOf方法')
    return 1
  }}var result = 1 + obj // 调用valueOf方法
console.log(result) // 2

// 只重写对象的toString方法
var obj = {  toString: function () {
    console.log('调用toString方法')
    return 2
  },}var result = 1 + obj // 调用toString方法
console.log(result) // 3

前两种情况上一样的，说明一下第三种情况为什么是调用的toString方法：

如果没有重写对象的valueOf方法，那么对象就会调用原型链上的valueOf方法，即Object.prototype对象中方法，这个方法默认返回的是对象本身，根据前面所说的转换规则，当调用valueOf方法的时候返回的是一个对象，会继续调用toString方法，看看是否返回原始类型的值，所以经过调用toString发现返回的是2，是一个原始类型，不再往下执行，所以会打印出3 ，1 + 2 = 3，再来看一下两个方法都返回对象是什么样的：

// 重写对象的valueOf和toString方法
var obj = {  valueOf: function () {
    console.log('调用valueOf方法')
    return {}
  },  toString: function () {
    console.log('调用toString方法')
    return {}
  },}var result = 1 + obj
console.log(result)
//执行结果如下：// 调用valueOf方法// 调用toString方法// Uncaught TypeError: Cannot convert object to primitive value// 先调用valueOf方法，后调用toString，最后报错，印证了上面我们所说的结论:当两个方法都返回对象的时候，会报错

最后说一下两个方法的调用情况：

valueOf偏向值运算，当有运算符的时候，会先调用此方法
toString偏向显示，当用alert函数的时候，会先调用此方法

关注我，或者公众号`知码前端`分享更多前端知识~~