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 相关文章推荐
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
js/jQuery对象互转(快速操作dom元素)
Feb 04 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
swiper实现异形轮播效果
Nov 28 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 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制作静态网站的模板框架(二)
2006/10/09 PHP
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
php的curl封装类用法实例
2014/11/07 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
Python获取Windows或Linux主机名称通用函数分享
2014/11/22 Python
Python过滤列表用法实例分析
2016/04/29 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
理解python中生成器用法
2017/12/20 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
村官工作鉴定评语
2014/01/27 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android