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源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
javascript中this的四种用法
May 11 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
iframe 异步加载技术及性能分析
2011/07/19 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
JS实现瀑布流布局
2017/10/21 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
python numpy实现rolling滚动案例
2020/06/08 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
美国旅游网站:Tours4Fun
2017/02/17 全球购物
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
港湾网络笔试题
2014/04/19 面试题
教师年度考核自我鉴定
2014/01/19 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
2014最新实习证明模板
2014/10/02 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
服务明星事迹材料
2014/12/29 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS