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 相关文章推荐
js实现的网页颜色代码表全集
Jul 17 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
jquery复选框checkbox实现删除前判断
Apr 20 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
JavaScript 函数的执行过程
May 09 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
详解vuex的简单使用
Mar 12 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 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
Zend的MVC机制使用分析(一)
2013/05/02 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
JS中Object对象的原型概念基础
2018/01/29 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
Python实现随机选择元素功能
2017/09/14 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
pandas.cut具体使用总结
2019/06/24 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
python实现用户名密码校验
2020/03/18 Python
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
个人自我鉴定
2013/11/07 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
租赁协议书范本
2014/04/22 职场文书
护理学专业求职信
2014/06/29 职场文书
公务员年度个人总结
2015/02/12 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
我的收音机情缘
2022/04/05 无线电