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 相关文章推荐
JQuery 网站换肤功能实现代码
Nov 02 Javascript
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
JS 面向对象之神奇的prototype
Feb 26 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 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 SplObjectStorage使用实例
2015/05/12 PHP
33道php常见面试题及答案
2015/07/06 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
使用js获取QueryString的方法小结
2010/02/28 Javascript
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
python实现简单的socket server实例
2015/04/29 Python
python控制台中实现进度条功能
2015/11/10 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
Pygame框架实现飞机大战
2020/08/07 Python
Django xadmin安装及使用详解
2020/10/26 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
自我鉴定怎么写
2013/12/05 职场文书
幼儿园数学教学反思
2014/02/02 职场文书
《值日生》教学反思
2014/02/17 职场文书
后备干部推荐材料
2014/12/24 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
《观察物体》教学反思
2016/02/17 职场文书
nginx七层负载均衡配置详解
2022/07/15 Servers