JobbyM's Blog

一日一练-JS toString 和valueOf 方法的联系与区别

发表于 | 分类于 | | 阅读次数

子曰：类型转换中toString 和valueOf 的联系与区别分析

首先是看看ES5 的规范是如何进行说明的

在这里有几个基础知识点需要了解一下：

  1. [[Class]]
    [[Class]] 属于Object 的内部属性，值的类型返回为String，其作用是，说明规范定义的对象分类的一个字符串值。
    ES5 规范的每种内置对象都定义了[[Class]] 内部属性值。宿主对象的[[Class]] 内部属性值可以是除了“Arguments”、 “Array”、 “Boolean”、 “Date”、 “Error”、 “Function”、 “JSON”、 “Math”、 “Number”、 “Object”、 “RegExp”、 “String” 的任意字符串。[[Class]] 内部属性的值用于内部区分对象的种类。注，本规范中除了通过Object.prototype.toString 没有提供任何手段使程序访问此值。

    摘自ES5 类型

  1. [[PrimitiveValue]]
    [[PrimitiveValue]] 属于只在某些对象中定义的内部属性，其值的类型范围为原始类型，作用是说明与此对象的内部状态信息关联。对于标准内置对象只能用 Boolean、Date、Number、String 对象实现 [[PrimitiveValue]]。

    摘自ES5 类型

  2. ToObject
    ToObject 抽象操作根据下表将其参数转换为对象类型的值：

输入类型 结果
未定义 抛出TypeError 异常。
空值 抛出TypeError 异常。
布尔值 创建一个新的Boolean 对象，其[[PrimitiveValue]] 属性被设为该参数的值。
数值 创建一个新的Number 对象，其[[PrimitiveValue]] 属性被设为该参数的值。
字符串 创建一个新的String 对象，其[[PrimitiveValue]] 属性被设为该参数的值。
对象 结果是输入的参数（不转换）

摘自ES5 类型转换与测试

Object.prototype.toString()

当调用toString 方法，采用如下步骤：

  1. 如果this 的值是undefined, 返回 **[object Undefined]**。
  2. 如果this 的值是null, 返回 **[object Null]**。
  3. 令O 为以this 作为参数调用ToObject 的结果。
  4. 令class 为O 的[[Class]] 内部属性的值。
  5. 返回三个字符串”[Object “、 class 和”]” 连起来的字符串。

    摘自ES5 Object.prototype.toString()

Object.prototype.valueOf()

当调用valueOf 方法，采用如下步骤：

  1. 令O 为以this 作为参数调用ToObject 的结果。
  2. 如果O 是以宿主对象15.2.2.1作为参数调用Object 构造器的结果，则
    1. 返回O 或返回先前传递给构造器的原宿主对象。返回的具体结果是由实现定义的。
  3. 返回O。

    摘自ES5 Object.prototype.valueOf()

toString() 和valueOf()

所有对象继承了两个转换方法。

  1. toString()
    作用是返回一个反映这个对象的字符串。默认的toString() 方法返回值
    1
    ({x:1, y:2}).toString() // => "[object Object]"
    1. 数组类（Array class）
      将每个数组元素转换为一个字符串，并在元素之间添加逗号后合并结果字符串。
      1
      [1,2,3].toString() // => "1,2,3"
    2. 函数类（Function class）
      返回这个函数的实现定义的表示方法。实际上，这里的实现方式是通常是将用户定义的函数转换为JavaScript 源代码字符串。
      1
      (function(x) { f(x) }).toString()  // => "function(x) {\n f(x) \n }"
    3. 日期类（Date class）
      返回一个可读的（意指可以通过JavaScript 的方法过了并再做封装）日期和时间字符串。
      1
      new Date().toString() // => "Tue Apr 24 2018 09:43:31 GMT+0800 (中国标准时间)"
    4. RegExp 类（RegExp class）
      将RegExp 对象转换为表示正则表达式直接量的字符串。
      1
      /\d+/g.toString() // => "/\\d+/g"
  2. valueOf()
    这个方法的任务并未详细定义：如果存在任意原始值，它就默认将对象转换为表示它的原始值。对象是复合值，而且诶额大多数对象无法真正表示为一个原始值，因此默认的valueOf() 方法简单地返回对象本身，而不是返回一个原始值。
    1. 数组、函数和正则表达式简单地继承了这个默认方法，调用这些类型的实例的valueOf() 方法只是简单返回对象本身。
    2. 日期类定义的valueOf() 方法会返回它额一个内部表示：1970年1月1日以来的毫秒数。
      1
      2
      var d = new Date(2018,4,1) // => 2018年5月1日
      d.valueOf()                // => 1525104000000

      参考自《JavaScript 权威指南（第6版）（中文版）》第3 章 类型、值和变量 中的3.8 类型转换

对象转换为原始值

  1. 对象到布尔值的转换：
    所有对象（包括数值和函数）都转换为true。对于包装函数亦是如此：new Boolean(false) 是一个对象而不是原始值，它将转化为true
  2. 对象到字符串的转换：
    1. 如果对象具有toString() 方法，则调用这个方法。如果它返回一个原始值，JavaScript 将原始值转换为字符串（如果它本身不是字符串的话），并返回这个字符串的结果。
    2. 如果对象没有toString() 方法， 或者这个方法并不返回一个原始值，那么JavaScript 会调用valueOf() 方法。如果存在这个方法，则JavaScript 调用它。如果返回值是原始值，JavaScript 将这个值转换为字符串（如果本身不是字符串的话），并返回这个字符串的结果。
    3. 否则，JavaScript 无法从toString() 或valueOf() 获得一个原始值，因此这时它将抛出一个类型错误异常。
  3. 对象到数字的转换：
    1. 如果对象具有valueOf() 方法，后者返回一个原始值，则JavaScript 将这个原始值转换为数字（如果需要的话）并返回这个数字。
    2. 否则，如果对象具有toString() 方法，后者返回一个原始值，则JavaScript 将其转换并返回。对象的toString() 方法返回一个字符串直接量（这里的原始值），JavaScript 将这个字符串转换为数字类型，并返回这数字。
    3. 否则，JavaScript 抛出一个类型错误异常。

      参考自《JavaScript 权威指南（第6版）（中文版）》第3 章 类型、值和变量 中的3.8 类型转换

实例讲解

  1. 空数组会被转换为数字0，具有单个元素的数组同样会转换为一个数组。
    1
    2
    Number([]) // => 0
    Number(['1234']) // => 1234

数组继承了默认的valueOf() 方法，这个方法返回一个对象而不是一个原始值，因此，数组到数字的转换则调用toString() 方法。空数组转换为空字符串，空字符串转换成数字0.

1
2
3
4
// [] => '' => 0
[].valueOf() // => []
[].toString() // => ''
'' // => 0

含有一个元素的数组转换为字符串的结果和这个元素转换字符串的结果一样。如果数组只包含一个数字元素，这个数字转换为字符串，再转换会数字。

1
2
3
[1].valueOf() // => [1]
[1].toString() // => "1"
"1" // => 1
  1. + 运算符可以进行数字加法和字符串连接操作。
    如果它的其中一个操作数是对象，则JavaScript 将使用特殊的方法将对象转换为原始值，而不是执行对象到方法的转换。
    这种特殊方式是指：通过valueOf() 或者toString() 返回的原始值将被直接使用，而不会被强制转换为数字或字符串。
    +、==、!= 和关系运算符也会做对象到原始值的转换，但要除去日期对象的特殊情形：任何对象都会首先尝试调用valueOf()，然后调用toString()。不管得到的原始值是否直接使用，它都不会进一步被转换为数字或字符串。

    参考自《JavaScript 权威指南（第6版）（中文版）》第3 章 类型、值和变量 中的3.8 类型转换

Tips

了解一下语法提案的批准流程
任何人都可以向标准委员会（又称TC39 委员会）提案，要求修改语言标准。
一种新的语法从提案到变成正式标准，需要经历五个阶段。每个阶段的变动都需要由TC39 委员会批准。

  1. Stage 0 - Strawman（展示阶段）
  2. Stage 1 - Proposal（征求意见阶段）
  3. Stage 2 - Draft（草案阶段）
  4. Stage 3 - Candidate（候选人阶段）
  5. Stage 4 - Finished（定案阶段）

一个提案只要能进入Stage 2，就差不多肯定会包含在以后的正式标准里面。ECMAScrpit 当前的所有提案，可以在TC39 的官方网站Github.com/tc39/ecma262 查看。

参考自阮一峰es6