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 RadioButtonList获取选中值
Apr 09 Javascript
javascript 二维数组的实现与应用
Mar 16 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
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
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
Javascript 对象的解释
2008/11/24 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
编写Python的web框架中的Model的教程
2015/04/29 Python
python文件名和文件路径操作实例
2017/09/29 Python
python如何修改装饰器中参数
2018/03/20 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
办理信用卡工作证明
2014/01/11 职场文书
担保书怎么写
2014/04/01 职场文书
干部对照检查材料范文
2014/08/26 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
办公经费申请报告
2015/05/15 职场文书
辛亥革命观后感
2015/06/02 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
详解Redis瘦身指南
2021/05/26 Redis
Redis特殊数据类型bitmap位图
2022/06/01 Redis