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 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
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下escape解码函数的实现方法
2010/08/08 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
python解析xml文件操作实例
2014/10/05 Python
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
python显示生日是星期几的方法
2015/05/27 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
基于python实现聊天室程序
2018/07/27 Python
对pandas处理json数据的方法详解
2019/02/08 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
Python如何调用外部系统命令
2019/08/07 Python
新手学python应该下哪个版本
2020/06/11 Python
python如何处理程序无法打开
2020/06/16 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
军训自我鉴定
2014/01/22 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
教学督导岗位职责
2015/04/10 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python