子曰:类型转换中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 类型

  1. 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 构造器的结果,则

    2.1. 返回O 或返回先前传递给构造器的原宿主对象。返回的具体结果是由实现定义的。
  3. 返回O。

摘自ES5 Object.prototype.valueOf()

toString() 和valueOf()

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

  1. toString()

    作用是返回一个反映这个对象的字符串。默认的toString() 方法返回值
  1. ({x:1, y:2}).toString() // => "[object Object]"

1.1. 数组类(Array class)

将每个数组元素转换为一个字符串,并在元素之间添加逗号后合并结果字符串。

js [1,2,3].toString() // => "1,2,3"

1.2. 函数类(Function class)

返回这个函数的实现定义的表示方法。实际上,这里的实现方式是通常是将用户定义的函数转换为JavaScript 源代码字符串。

js (function(x) { f(x) }).toString() // => "function(x) {\n f(x) \n }"

1.3. 日期类(Date class)

返回一个可读的(意指可以通过JavaScript 的方法过了并再做封装)日期和时间字符串。

js new Date().toString() // => "Tue Apr 24 2018 09:43:31 GMT+0800 (中国标准时间)"

1.4. RegExp 类(RegExp class)

将RegExp 对象转换为表示正则表达式直接量的字符串。

js /\d+/g.toString() // => "/\\d+/g"

2. valueOf()

这个方法的任务并未详细定义:如果存在任意原始值,它就默认将对象转换为表示它的原始值。对象是复合值,而且诶额大多数对象无法真正表示为一个原始值,因此默认的valueOf() 方法简单地返回对象本身,而不是返回一个原始值。

2.1. 数组、函数和正则表达式简单地继承了这个默认方法,调用这些类型的实例的valueOf() 方法只是简单返回对象本身。

2.2. 日期类定义的valueOf() 方法会返回它额一个内部表示:1970年1月1日以来的毫秒数。

  1. var d = new Date(2018,4,1) // => 2018年5月1日
  2. d.valueOf() // => 1525104000000

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

对象转换为原始值

  1. 对象到布尔值的转换:

    所有对象(包括数值和函数)都转换为true。对于包装函数亦是如此:new Boolean(false) 是一个对象而不是原始值,它将转化为true
  2. 对象到字符串的转换:

    2.1. 如果对象具有toString() 方法,则调用这个方法。如果它返回一个原始值,JavaScript 将原始值转换为字符串(如果它本身不是字符串的话),并返回这个字符串的结果。

    2.2. 如果对象没有toString() 方法, 或者这个方法并不返回一个原始值,那么JavaScript 会调用valueOf() 方法。如果存在这个方法,则JavaScript 调用它。如果返回值是原始值,JavaScript 将这个值转换为字符串(如果本身不是字符串的话),并返回这个字符串的结果。

    2.3. 否则,JavaScript 无法从toString()valueOf() 获得一个原始值,因此这时它将抛出一个类型错误异常。
  3. 对象到数字的转换:

    3.1. 如果对象具有valueOf() 方法,后者返回一个原始值,则JavaScript 将这个原始值转换为数字(如果需要的话)并返回这个数字。

    3.2. 否则,如果对象具有toString() 方法,后者返回一个原始值,则JavaScript 将其转换并返回。对象的toString() 方法返回一个字符串直接量(这里的原始值),JavaScript 将这个字符串转换为数字类型,并返回这数字。

    3.3. 否则,JavaScript 抛出一个类型错误异常。

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

实例讲解

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

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

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

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

  1. [1].valueOf() // => [1]
  2. [1].toString() // => "1"
  3. "1" // => 1
  1. + 运算符可以进行数字加法和字符串连接操作。

    如果它的其中一个操作数是对象,则JavaScript 将使用特殊的方法将对象转换为原始值,而不是执行对象到方法的转换。

    这种特殊方式是指:通过valueOf() 或者toString() 返回的原始值将被直接使用,而不会被强制转换为数字或字符串。

    +==!= 和关系运算符也会做对象到原始值的转换,但要除去日期对象的特殊情形:任何对象都会首先尝试调用valueOf(),然后调用toString()。不管得到的原始值是否直接使用,它都不会进一步被转换为数字或字符串。

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

一日一练-JS toString 和valueOf 方法的联系与区别的更多相关文章

  1. 简单说 JavaScript中的tostring( ) 与 valueOf( )方法

    说明 所有的对象都继承有toString() 和 valueOf() 方法,对象到字符串,对象到数字的转换,会通过调用待转换对象的这两个方法中的一个来完成. 解释 toString( )方法的作用是: ...

  2. JavaScript引用类型之Array数组的toString()和valueof()方法的区别

    一.转换方法 1.在JavaScript中几乎所有对象都具有toLocaleString().toString和valueof()方法,因为,所有的对象都继承自Object,而前面所说的方法都是Obj ...

  3. 区分javascript中的toString(),toLocaleString(),valueOf()方法

    首先我们随意创建一个对象,这很简单,打开FF浏览器的Firebug切换到控制台或者打开webkit浏览器的审查元素功能. 输入以下内容: var obj1=[1,2,3,4,5] var obj2=[ ...

  4. 《JS权威指南学习总结--toString()和valueOf()方法》

    方法要点: 一.toString()方法 1.主要用于Array.Boolean.Date.Error.Function.Number等对象转化为字符串形式.      数组类的toSting()方法 ...

  5. js中toString和valueOf方法的区别

    toString 方法 返回对象的字符串表示形式. 语法:objectname.toString([radix]) objectname 必需.要为其搜索字符串表示形式的对象. radix 可选.为将 ...

  6. JS中的toString()和valueOf()方法

    1.toString()方法:主要用于Array.Boolean.Date.Error.Function.Number等对象转化为字符串形式.日期类的toString()方法返回一个可读的日期和字符串 ...

  7. JavaScript的toString()和valueof()方法

    toString()方法: 函数:函数 (function(){}).toString(); //返回"function(){}" typeof((function(){}).to ...

  8. Java中区别.toString() ,(String),valueOf()方法

    在java项目的实际开发和应用中,常常需要用到将对象转为String这一基本功能.本文将对常用的转换方法进行一个总结.常用的方法有Object.toString(),(String)要转换的对象,St ...

  9. javascript中toString和valueOf方法的区别

    toString():将对象转为字符串 valueOf():获取对象的原始值, 1.针对基本类型的变量:如在string,number,boolean类型的变量上调用这两个方法时,直接返回原始值,即变 ...

随机推荐

  1. Crontab定时备份数据库

    1.创建一个shell脚本文件 cd /usr mkdir dbbackup cd /usr/dbbackup vim backup.sh echo "------------------- ...

  2. threadlocal原理及常用应用场景

    1.深入解析ThreadLocal类 ThreadLocal类提供的几个方法: public T get() { } public void set(T value) { } public void  ...

  3. Python-字典、集合、字符编码、文件操作整理-Day3

    1.字典 1.1.为什么有字典: 有个需求,存所有人的信息 这时候列表就不能轻易的表示完全names = ['stone','liang'] 1.2.元组: 定义符号()t = (1,2,3)tupl ...

  4. SiteMesh入门(1-1)SiteMesh是什么?

    1.问题的提出 在开发Web 应用时,Web页面可能由不同的人参与开发,因此开发出来的界面通常千奇百怪.五花八门,风格难以保持一致. 为了统一界面的风格,Struts 框架提供了一个标签库Tiles ...

  5. 开发技巧(3-1)Eclipse查找关键字

    1.选择资源目录->选择search-file菜单 2.在弹出的对话框中, 输入要[搜索的字符串],选择[selected resources],点击[search]按钮 3.搜索结果

  6. centOs6.5配置jdk及其注意事项

    1.下载jdk1.7 百度云链接: https://pan.baidu.com/s/15vXLO2eV18eVvmt-R5jGnQ 密码: 1gd6 2.解压压缩包 通过终端在/usr/local下新 ...

  7. 用js来实现那些数据结构(数组篇02)

    上一篇文章简单的介绍了一下js的类型,以及数组的增删方法.这一篇文章,我们一起来看看数组还有哪些用法,以及在实际工作中我们可以用这些方法来做些什么.由于其中有部分内容并不常用,所以我尽量缩小篇幅.在这 ...

  8. lambda匿名函数透析

    lambda匿名函数透析 目录 1       匿名函数的作用... 1 2       匿名函数的格式... 1 3       匿名函数实例代码... 3   1         匿名函数的作用 ...

  9. AES(高级加密)

    AES(高级加密) #3.6安装 pip3 install pycryptodome #mac pip3 install pycrypto a. 事例: ####################### ...

  10. Ubuntu16.04系统下 解决“无法获得锁 /var/lib/dpkg/lock -open (11:资源暂时不可用)、无法锁定管理目录(/var/lib/dpkg/),是否有其他进程正占用它?”的方法

    在Ubuntu16.04下安装软件,例如:sudo apt-get install lrzsz时提示: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用) 无法 ...