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 相关文章推荐
javascript iframe内的函数调用实现方法
Jul 19 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
js调用css属性写法
Sep 21 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
vue如何获取自定义元素属性参数值的方法
May 14 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 htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
php生成缩略图的类代码
2008/10/02 PHP
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
react中的ajax封装实例详解
2017/10/17 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
Python缩进和冒号详解
2016/06/01 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
Python logging模块handlers用法详解
2020/08/14 Python
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
技术总监岗位职责
2013/12/05 职场文书
技校生自我鉴定
2013/12/08 职场文书
毕业生自荐书模版
2014/01/04 职场文书
新闻报道策划方案
2014/06/11 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
python入门学习关于for else的特殊特性讲解
2021/11/20 Python
Consul在linux环境的集群部署
2022/04/08 Servers
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL