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 相关文章推荐
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
js实现交通灯效果
Jan 13 Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 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
怎样去阅读一份php源代码
2009/08/21 PHP
优化php效率,提高php性能的一些方法
2011/03/24 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
JS 建立对象的方法
2007/04/21 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
子页向父页传值示例
2013/11/27 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
详解Scrapy Redis入门实战
2020/11/18 Python
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
linux面试题参考答案(4)
2014/09/21 面试题
小学生期末自我鉴定
2014/01/19 职场文书
通信研究生自荐信
2014/02/01 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
纪律教育月活动总结
2014/08/26 职场文书
弄虚作假心得体会
2014/09/10 职场文书
接待员岗位职责
2015/02/13 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS