JavaScript中valueOf函数与toString方法深入理解


Posted in Javascript onDecember 02, 2012

JavaScript中valueOf函数方法是返回指定对象的原始值。使用方法:
object.valueOf( )object是必选项参数是任意固有 JScript 对象。
每个JavaScript固有对象的 valueOf 方法定义不同。

对象 返回值
Array 数组的元素被转换为字符串,这些字符串由逗号分隔,连接在一起。其操作与 Array.toString 和 Array.join 方法相同。
Boolean Boolean 值。
Date 存储的时间是从 1970 年 1 月 1 日午夜开始计的毫秒数 UTC。
Function 函数本身。
Number 数字值。
Object 对象本身。这是默认情况。
String 字符串值。

Math 和 Error 对象没有 valueOf 方法。

基本上,所有JS数据类型都拥有valueOf和toString这两个方法,null除外。它们俩解决javascript值运算与显示的问题。
JavaScript 的 valueOf() 方法
valueOf() 方法可返回 Boolean 对象的原始值。
用法booleanObject.valueOf(),返回值为booleanObject 的原始布尔值。如果调用该方法的对象不是 Boolean,则抛出异常 TypeError。

<script type="text/javascript"> 
var boo = new Boolean(false); 
document.write(boo.valueOf()); 
</script>

以上脚本会输出false。
JavaScript 的 toString() 方法
toString() 方法可把一个逻辑值转换为字符串,并返回结果。
用法 booleanObject.toString(),返回值根据原始布尔值或者 booleanObject 对象的值返回字符串 "true" 或 "false"。如果调用该方法的对象不是 Boolean,则抛出异常 TypeError。
在 Boolean 对象被用于字符串环境中时,此方法会被自动调用。
下面脚本将创建一个 Boolean 对象,并把它转换成字符串:
<script type="text/javascript"> 
var boo = new Boolean(true); 
document.write(boo.toString()); 
</script>

脚本输出:true。
先看一例
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

如果只重写了toString,对象转换时会无视valueOf的存在来进行转换。但是,如果只重写了valueOf方法,在要转换为字符串的时候会优先考虑valueOf方法。在不能调用toString的情况下,只能让valueOf上阵了。对于那个奇怪的字符串拼接问题,可能是出于操作符上,翻开ECMA262-5 发现都有一个getValue操作。嗯,那么谜底应该是揭开了。重写会加大它们调用的优化高,而在有操作符的情况下,valueOf的优先级本来就比toString的高。
Javascript 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
Bootstrap安装环境配置教程分享
May 27 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
json对象转字符串如何实现
Dec 02 #Javascript
javascript 构造函数强制调用经验总结
Dec 02 #Javascript
js精度溢出解决方案
Dec 02 #Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 #Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 #Javascript
javascript控制swfObject应用介绍
Nov 29 #Javascript
javascript 保存文件到本地实现方法
Nov 29 #Javascript
You might like
Yii调试SQL的常用方法
2014/07/09 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
Python使用OpenCV进行标定
2018/05/08 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
Django单元测试工具test client使用详解
2019/08/02 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
最新奶茶店创业计划书
2014/01/25 职场文书
小区停车场管理制度
2014/01/27 职场文书
医学专业应届生的自我评价
2014/02/28 职场文书
一份文言文检讨书
2014/09/13 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python