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 学习之旅 (1)
Feb 05 Javascript
JavaScript 学习笔记(四)
Dec 31 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
javascript操作ul中li的方法
May 14 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
详解小程序循环require之坑
Mar 08 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
js+audio实现音乐播放器
Sep 13 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递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
python实现查询苹果手机维修进度
2015/03/16 Python
python3 读写文件换行符的方法
2018/04/09 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
毕业生教师求职信
2013/10/20 职场文书
小学生成长感言
2014/01/30 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
后勤主管岗位职责
2014/03/01 职场文书
项目经理任命书内容
2014/06/06 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
车间质检员岗位职责
2015/04/08 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
起诉意见书范文
2015/05/19 职场文书
雷锋的观后感
2015/06/10 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
goland 设置project gopath的操作
2021/05/06 Golang
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技