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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 Javascript
跟我学习javascript的定时器
Nov 19 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 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 set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
vue-router 按需加载 component: () => import() 报错的解决
2020/09/22 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
python爬取淘宝商品销量信息
2018/11/16 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
生物制药毕业生自荐信
2013/10/16 职场文书
参观接待方案
2014/03/17 职场文书
求职自我评价范文100字
2014/09/23 职场文书
2014年民政工作总结
2014/11/26 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书