Javascript中valueOf与toString区别浅析


Posted in Javascript onMarch 19, 2013

前言

基本上,所有JS数据类型都拥有这两个方法,null除外。它们俩解决javascript值运算与显示的问题,重写会加大它们调用的优化。

测试分析

先看一例:

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方法。
但如何区分什么情况下是调用了哪个方法呢,我们可以通过另一个方法测试一下。
由于用到console.log,请在装有firebug的FF中实验!
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

总结:valueOf偏向于运算,toString偏向于显示。
1、 在进行对象转换时(例如:alert(a)),将优先调用toString方法,如若没有重写toString将调用valueOf方法,如果两方法都不没有重写,但按Object的toString输出。
2、 在进行强转字符串类型时将优先调用toString方法,强转为数字时优先调用valueOf。
3、 在有运算操作符的情况下,valueOf的优先级高于toString。
Javascript 相关文章推荐
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
JS函数重载的解决方案
May 13 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
基于Node.js的大文件分片上传示例
Jun 19 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 Javascript
Javascript Throttle & Debounce应用介绍
Mar 19 #Javascript
JS 实现获取打开一个界面中输入的值
Mar 19 #Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 #Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 #Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 #Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 #Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 #Javascript
You might like
PHP+MYSQL的文章管理系统(二)
2006/10/09 PHP
FCKeditor添加自定义按钮
2008/03/27 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
php编程每天必学之表单验证
2016/03/01 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
javascript 限制输入脚本大全
2009/11/03 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
python实现计算资源图标crc值的方法
2014/10/05 Python
Python标准库defaultdict模块使用示例
2015/04/28 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
Python匹配中文的正则表达式
2016/05/11 Python
如何卸载python插件
2020/07/08 Python
python线程里哪种模块比较适合
2020/08/02 Python
python 批量将中文名转换为拼音
2021/02/07 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
财务整改报告范文
2014/11/05 职场文书
公司开除员工通知
2015/04/22 职场文书
村主任当选感言
2015/08/01 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python