首先要说明的是这两种方法是toPrimitive抽象操作里会经常用到的。

默认情况下,执行这个抽象操作时会先执行valueOf方法,如果返回的不是原始值,会继续执行toString方法,如果返回的还不是原始值,那么会报错,如果有指定转换类型时,情况又会有所不同,详细解析请继续往下看。

(注意:valueOf和toString方法在Date,array等对象中有些是被重写过的,所以不同对象调用此方法可能产生的操作不同,如果没有这些方法,会调用最原始的Object.prototype上的valueOf和toString方法)

数据的转换

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

第一个是toString(),它的作用是返回一个反映这个对象的字符串

第二个是valueOf(),它的作用是返回它相应的原始值

toString()

toString()可以看做是把一个数据转换成了相应字符串的形式,安照这个转换规则中

案例:
//返回相应的字符串
console.log(
({x:1,
y:1
}).toString() ); // [object Object]
console.log([1,2,3].toString()); // 1,2,3
console.log((function(x){f(x); }).toString()); //function (x){f(x); }
console.log(/\d+/g.toString()); // /\d+/g
console.log(new Date(2015,4,4).toString()); // Mon May 04 2015 00:00:00 GMT+0800 console.log(new Date(2015,4,4).valueOf()); // 1430668800000

valueOf()


每个JavaScript固有对象的 valueOf 方法定义不同。


对象 返回值
Array 数组没有valueOf方法,继承的是Object.prototype.valueOf的原始方法,返回数组本身
Boolean Boolean 值。
Date 存储的时间是从 1970 年 1 月 1 日午夜开始计的毫秒数 UTC。
Function 同Array
Number 数字值。
Object 对象本身。这是默认情况。
String 字符串值。
 

Array,Function,Math 和 Error 对象没有 valueOf 方法。

------------------------------------------------------------------------------------------------------------------------------

一般来说,对象到字符串的转换经过了如下步骤:

1.如果对象具有toString()方法,则调用这个方法。如果它返回一个原始值,js将这个值转换成字符串,并返还这个字符串结果。

2.如果对象没有toString()方法,或者这个方法并不返回一个原始值,那么js将调用valueOf()方法。

3.否则,js无法从toString()或者valueOf()获得一个原始值,因此这时它将抛出一个类型错误异常。

一般来说,对象到数字的转换过程中,js做了同样类似的事情,但这里它会首先尝试使用valueOf()方法:

1.如果对象具有valueOf()方法,后者返回一个原始值,则js将这个原始值转换成数字,并返回这个数字。

2.否则,如果对象具有toString()方法,后者返回一个原始值,则js将转换并返回。

(首先js转换成相应的字符串原始值,再继续将这个原始值转换成相应的数字类型,再返回数字)

3.否则,js抛出一个类型错误异常。

对象通过toString或valueOf方法转换为原始值,JS语言核心的内置类首先尝试使用valueOf(),再尝试使用toString()

一个小李子

“1” == true;

将返回true,转换形式是:true首先转换为1,然后再执行比较。接下来字符串“1”也转换成了数字1,相等,所以返回true

另外如:

var str = new String('hello,world');
console.log(typeof str); //'object'
console.log(typeof str.valueOf()); //'string'

对于所有非日期对象来说,对象到原始值的转换基本上是对象到数字的转换

(首先调用valueOf,但日期对象则使用对象到字符串的转换模式,但这种转换只执行一次就立即被使用,不会像上面所说的那般 先转成字符串再转成相应的数字类型)

比如说,js中“+"运算符可以进行数学加法和字符串连接操作。

如果他它的其中一个操作数是对象,则js将使用特殊的方法将对象转换成原始值,而不是使用其他算术运算符的方法执行对象到数字的转换,”==“运算符类似

和”==“一样,”<"与其他运算符也会做对象到原始值的转换,但要出去日期对象的特殊情形

“-“减号运算符把两个操作数都转换成数字

比如:

var now = new Date();
console.log(now); // Date {Sat Apr 04 2015 13:21:08 GMT+0800}
console.log(typeof (now+1)); //string
console.log((now+1)); //Sat Apr 04 2015 13:21:08 GMT+08001
console.log(typeof (now-1)); //number
console.log((now-1)); //
console.log(now == now.toString()); //true
console.log(now > now -1); //true
var date = new Date();
var date_string = date.toString();
var date_value = date.valueOf();
alert(date == date_string); //true
alert(date == date_value); //false
var aaa = {
i: 10,
valueOf: function() { return this.i+30; },
toString: function() { return this.valueOf()+10; }
}
alert(aaa > 20); // true
alert(+aaa); // 40
alert(aaa); // 50

之所以有这样的结果,因为它们偷偷地调用valueOf或toString方法。更进一步测试

var bbb = {
i: 10,
toString: function() {
console.log('toString');
return this.i;
},
valueOf: function() {
console.log('valueOf');
return this.i;
}
}
alert(bbb);// 10 toString
alert(+bbb); // 10 valueOf
alert(''+bbb); // 10 valueOf
alert(String(bbb)); // 10 toString
alert(Number(bbb)); // 10 valueOf
alert(bbb == '10'); // true valueOf
alert(bbb === '10'); // false

乍一看结果,大抵给人的感觉是,如果转换为字符串时调用toString方法,如果是转换为数值时则调用valueOf方法,但其中有两个很不和谐。

一个是alert(''+bbb),字符串合拼应该是调用toString方法……另一个我们暂时可以理解为===操作符不进行隐式转换,因此不调用它们。

为了追究真相,我们需要更严谨的实验。

var aa = {
i: 10,
toString: function() {
console.log('toString');
return this.i;
}
}
alert(aa);// 10 toString
alert(+aa); // 10 toString
alert(''+aa); // 10 toString
alert(String(aa)); // 10 toString
alert(Number(aa)); // 10 toString
alert(aa == '10'); // true toString
再看valueOf。
var bb = {
i: 10,
valueOf: function() {
console.log('valueOf');
return this.i;
}
}
alert(bb);// [object Object]
alert(+bb); // 10 valueOf
alert(''+bb); // 10 valueOf
alert(String(bb)); // [object Object]
alert(Number(bb)); // 10 valueOf
alert(bb == '10'); // true valueOf
发现有点不同吧?!它没有像上面toString那样统一规整。对于那个[object Object],我估计是从Object那里继承过来的,我们再去掉它看看。
Object.prototype.toString = null;
var cc = {
i: 10,
valueOf: function() {
console.log('valueOf');
return this.i;
}
}
alert(cc);// 10 valueOf
alert(+cc); // 10 valueOf
alert(''+cc); // 10 valueOf
alert(String(cc)); // 10 valueOf
alert(Number(cc)); // 10 valueOf
alert(cc == '10'); // true valueOf

总结起来就是 如果只重写了toString,对象转换时会无视valueOf的存在来进行转换。

但是,如果只重写了valueOf方法,在要转换为字符串的时候会优先考虑valueOf方法。在不能调用toString的情况下,只能让valueOf上阵了

[-_-]眼睛累了吧,注意劳逸结合呀[-_-]

10分钟搞懂toString和valueOf函数(详细版)的更多相关文章

  1. 10分钟搞懂Tensorflow 逻辑回归实现手写识别

    1. Tensorflow 逻辑回归实现手写识别 1.1. 逻辑回归原理 1.1.1. 逻辑回归 1.1.2. 损失函数 1.2. 实例:手写识别系统 1.1. 逻辑回归原理 1.1.1. 逻辑回归 ...

  2. 搞懂toString()与valueOf()的区别

    一.toString() 作用:toString()方法返回一个表示改对象的字符串,如果是对象会返回,toString() 返回 “[object type]”,其中type是对象类型. 二.valu ...

  3. 花10分钟搞懂开源框架吧 - 【NancyFx.Net】

    NancyFx是什么? Nancy是一个轻量级的独立的框架,下面是官网的一些介绍: Nancy 是一个轻量级用于构建基于 HTTP 的 Web 服务,基于 .NET 和 Mono 平台,框架的目标是保 ...

  4. 干货 | 10分钟搞懂branch and bound(分支定界)算法的代码实现附带java代码

    Outline 前言 Example-1 Example-2 运行说明 00 前言 前面一篇文章我们讲了branch and bound算法的相关概念.可能大家对精确算法实现的印象大概只有一个,调用求 ...

  5. c#代码 天气接口 一分钟搞懂你的博客为什么没人看 看完python这段爬虫代码,java流泪了c#沉默了 图片二进制转换与存入数据库相关 C#7.0--引用返回值和引用局部变量 JS直接调用C#后台方法(ajax调用) Linq To Json SqlServer 递归查询

    天气预报的程序.程序并不难. 看到这个需求第一个想法就是只要找到合适天气预报接口一切都是小意思,说干就干,立马跟学生沟通价格. ​ ​不过谈报价的过程中,差点没让我一口老血喷键盘上,话说我们程序猿的人 ...

  6. javascript之toString()和valueOf()函数

    1.我们为什么要了解这两种方法 众所周知,toString()函数和valueOf函数,这两个函数是Object类的对象生来就拥有的,而且他们还可以允许我们重写,那么,这两个函数到底有什么用呢? 从名 ...

  7. 【转】让你10分钟搞定Mac--最简单快速的虚拟安装

    文章出处:让你10分钟搞定Mac--最简单快速的虚拟安装http://bbs.itheima.com/thread-106643-1-1.html (出处: 黑马程序员训练营论坛) 首先说明一下. 第 ...

  8. [转帖]10分钟看懂Docker和K8S

    10分钟看懂Docker和K8S https://zhuanlan.zhihu.com/p/53260098 2010年,几个搞IT的年轻人,在美国旧金山成立了一家名叫“dotCloud”的公司. 这 ...

  9. 五分钟搞懂POM设计模式

    转载请注明出处️ 作者:IT小学生蔡坨坨 原文链接:五分钟搞懂POM设计模式 大家好,我是IT小学生蔡坨坨. 今天,我们来聊聊Web UI自动化测试中的POM设计模式. 为什么要用POM设计模式 前期 ...

随机推荐

  1. 给出每个员工每年薪水涨幅超过5000的员工编号emp_no、薪水变更开始日期from_date以及薪水涨幅值salary_growth,并按照salary_growth逆序排列。

    题目描述 给出每个员工每年薪水涨幅超过5000的员工编号emp_no.薪水变更开始日期from_date以及薪水涨幅值salary_growth,并按照salary_growth逆序排列. 提示:在s ...

  2. 设计模式-命令模式(Command)

    关注公众号 JavaStorm 获取更多成长. 大约需要6分钟读完.建议收藏后阅读. 命令模式把一个请求或者操作封装到一个对象中.命令模式允许系统使用不同的请求把客户端参数化,对请求排队或者记录请求日 ...

  3. 基于IDEA实现SSM整合框架的搭建配置流程

    1.创建数据库表,以员工信息表为例子: DROP TABLE IF EXISTS `em_info`; CREATE TABLE `em_info` ( `em_id` INT(50) NOT NUL ...

  4. EF升级 反射重载方法ApplyConfiguration

    protected override void OnModelCreating(ModelBuilder builder) { base.OnModelCreating(builder); //var ...

  5. C 语言实例 - 判断数字为几位数

    C 语言实例 - 判断数字为几位数 用户输入数字,判断该数字是几位数. 实例 #include <stdio.h> int main() { long long n; ; printf(& ...

  6. thymeleaf中th:attr用法以及相关的thymeleaf基本表达式

    额,有人写的很好,我直接搬了 thymeleaf中th:attr用法 1.写死的单个属性值添加 th:attr="class=btn" 2.写死的多个属性值添加 th:attr=& ...

  7. spring boot + spring data jpa

    Spring Data Repository的核心接口是Repository(好像也没什么好惊讶的).这个接口需要领域类(Domain Class)跟领域类的ID类型作为参数.这个接口主要是让你能知道 ...

  8. ParallelsDesktop安装DOS7.1并与MAC共享文件

    ParallelsDesktop安装DOS7.1并与MAC共享文件 Table of Contents 1. 在Parallels Desktop中安装DOS7.1 2. 配置与Mac共享文件 1 在 ...

  9. 洛谷 P1200 [USACO1.1]你的飞碟在这儿Your Ride Is Here

    你的飞碟在这儿 难度:☆ Code: #include<iostream> #include<cstring> #include<cstdio> using nam ...

  10. JavaScprit30-6 学习笔记

    今天学习的是  仿即时搜索诗句效果 第一个问题: fetch() Fetch API  提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应.它还提供了一个全局 fe ...