子曰:类型转换中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. 25.C++- 泛型编程之函数模板(详解)

    本章学习: 1)初探函数模板 2)深入理解函数模板 3)多参函数模板 4)重载函数和函数模板 当我们想写个Swap()交换函数时,通常这样写: void Swap(int& a, int&am ...

  2. Python模块 - os , sys.shutil

    os 模块是与操作系统交互的一个接口 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录: ...

  3. Android智能手机上的音频浅析

    手机可以说是现在人日常生活中最离不开的电子设备了.它自诞生以来,从模拟的发展到数字的,从1G发展到目前的4G以及不久将来的5G,从最初的只有唯一的功能(打电话)发展到目前的全功能,从功能机(featu ...

  4. Spark:scala集合转化为DS/DF

    scala集合转化为DS/DF case class TestPerson(name: String, age: Long, salary: Double) val tom = TestPerson( ...

  5. Ubuntu+vscode打不开

    前沿: vscode链接 参考链接 问题: 之前在Ubuntu上安装chrome, 结果chrome没装成功, 还把vscode给qiu坏了, 貌似是当时安装chrome时提示要升级一个包. 后来发现 ...

  6. 使用Navicat Premium 链接本地数据库的方法(二)

    最早一篇:http://www.cnblogs.com/zhengyeye/p/6363179.html 现在又重新装了电脑系统,需遇到了同样的问题.恰巧记得之前自己写的文档,没准可以帮助自己解决掉这 ...

  7. springboot快速入门

    SpringBoot简介 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再 ...

  8. Redis、Memcache与MongoDB的区别

    >>Memcached Memcached的优点:Memcached可以利用多核优势,单实例吞吐量极高,可以达到几十万QPS(取决于key.value的字节大小以及服务器硬件性能,日常环境 ...

  9. No mapping found for HTTP request with URI [/user/login.do] in DispatcherServlet with name 'dispatcher'错误

    1.警告的相关信息 七月 24, 2017 3:53:04 下午 org.springframework.web.servlet.DispatcherServlet noHandlerFound警告: ...

  10. 典型分布式系统分析:MapReduce

    在 <分布式学习最佳实践:从分布式系统的特征开始(附思维导图)>一文中,提到学习分布式系统的一个好方法是思考分布式系统要解决的问题,有哪些衡量标准,为了解决这些问题:提出了哪些理论.协议. ...