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 相关文章推荐
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
javascript里模拟sleep(两种实现方式)
Jan 25 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
Js表格万条数据瞬间加载实现代码
Feb 20 Javascript
js中this用法实例详解
May 05 Javascript
jQuery.prop() 使用详解
Jul 19 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
javascript之Array 数组对象详解
Jun 07 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 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中使用sockets:从新闻组中获取文章
2006/10/09 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
php下Memcached入门实例解析
2015/01/05 PHP
PHP查询快递信息的方法
2015/03/07 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
Prototype Function对象 学习
2009/07/12 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
js的回调函数详解
2015/01/05 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
TensorFlow损失函数专题详解
2018/04/26 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
会议接待欢迎词
2014/01/12 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
志愿者工作心得体会
2016/01/15 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
php将xml转化对象的实例详解
2021/11/17 PHP