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 相关文章推荐
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
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简单浏览目录内容的实现代码
2013/06/07 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
python实现连接mongodb的方法
2015/05/08 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
Python多进程原理与用法分析
2018/08/21 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
Python json模块与jsonpath模块区别详解
2020/03/05 Python
python的json包位置及用法总结
2020/06/21 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
英文简历中的自我评价
2013/10/06 职场文书
房地产销售计划书
2014/01/10 职场文书
电焊工岗位职责
2014/03/06 职场文书
总经理任命书
2014/03/29 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
流动人口婚育证明
2014/10/19 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
营运督导岗位职责
2015/04/10 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书