深入理解Javascript中的valueOf与toString


Posted in Javascript onJanuary 04, 2017

基本上,javascript中所有数据类型都拥有valueOf和toString这两个方法,null除外。它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下。

toString()

toString()函数的作用是返回object的字符串表示,JavaScript中object默认的toString()方法返回字符串”[object Object]“。定义类时可以实现新的toString()方法,从而返回更加具有可读性的结果。JavaScript对于数组对象、函数对象、正则表达式对象以及Date日期对象均定义了更加具有可读性的toString()方法:

1.array的toString()方法将返回以逗号分隔的数组成员。比如,[1,2,3].toString()会返回字符串”1,2,3″。

2.function的toString()方法将返回函数的文本定义。比如,(function(x){return x*2;}).toString()会返回字符串”function(x){return x*2;}”。

3.RegExp的toString()方法与function的toString()方法类似,将返回正则表达式的文本定义。比如,/\d+/g.toString()会返回字符串”/\\d+/g”。

4.Date的toString()方法将返回一个具有可读性的日期时间字符串。

5.如果 Boolean 值是 true,则返回 “true”。否则,返回 “false”。

valueOf()

valueOf()函数的作用是返回该object自身。与toString()一样,定义类时可以实现新的valueOf()方法,从而返回需要的结果。JavaScript对于Date对象定义了更加具有可读性的valueOf()方法:

1.Date的valueOf()方法将返回一个时间戳数值,该数值为Date对象与1970年1月1日零时的时间差(以毫秒为单位)。其他一律返回对象本身。

在js高程里面有一段代码:

var colors = ["red", "blue", "green"]; // 创建一个包含3 个字符串的数组 
alert(colors.toString()); // red,blue,green 
alert(colors.valueOf()); // red,blue,green 
alert(colors); // red,blue,green

三个输出全部一样,那么toString()和valueOf()区别到底是什么?看下一个我写的例子:

var arr = [1,2,3]; 
alert(Array.isArray(arr.valueOf())); 
alert(Array.isArray(arr.toString()));

结果是第一个是true而第二个是false,为什么呢,其实valueOf()调用完以后还是返回一个数组。这个数组被alert的时候会调用toString()函数,所以不是valueOf()和toString()函数相同,而是间接的调用了toString()函数!
进一步测试下:

var arr = [1,2,3]; 
arr.toString = function () { 
  alert("你调用了toString函数"); 
} 
alert(arr.valueOf());

结果就是我们会看到“你调用了toString函数”。

而对于数值,我们可以调用valueOf的时候直接可以获得数字进行计算,不必转化成字符串,所以不会调用toString。反言之,如果我们需要获得操作对象的字符串形式的时候就会调用其toString函数。
验证如下代码:

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

我的理解:valueOf的意思是返回最适合该对象类型的原始值,而toString则是将在该对象类型的原始值以字符串形式返回。

第一个

alert(bbb);// 10 toString

这里我们的alert函数需要是的字符串,所以获取的是字符串,而不是原始值,故而调用了toString

第二个

alert(+bbb); // 10 valueOf

同理,alert要的是字符串不是原始值,其实是+bbb这个东西被调用了toString,而bbb被调用了valueOf

为了验证我们这样写

var a = { 
  i: 1, 
  valueOf: function () { 
    alert("你调用了a的valueOf函数"); 
    return this.i; 
  }, 
  toString: function () { 
    alert("你调用了a的toString函数"); 
    return this.i; 
  } 
}; 
var c = { 
  i: +a, 
  valueOf: function () { 
    alert("你调用了c的valueOf函数"); 
    return this.i; 
  }, 
  toString: function () { 
    alert("你调用了c的toString函数"); 
    return this.i; 
  } 
}; 
alert(c);

其中让c=+a,那么即可知道结果,果然如此,调用了a的valueOf和c的toString

第三个

alert(''+bbb); // 10 valueOf

同理,我们可以把上一段我写的程序里面的c:+a改成c:''+a

第四个

alert(String(bbb)); // 10 toString

String这个强制转换其实在其内部是调用了传入参数的toString函数……

第五个

alert(Number(bbb)); // 10 valueOf

这个是有区别的,因为bbb的i属性是数值类型的,如果i为11111xxxxx这样的字符串,我们就可以看到调用了bbb的toString了

代码例子:

var c = { 
  i: "11111xxxx", 
  valueOf: function () { 
    alert("你调用了c的valueOf函数"); 
    return this.i; 
  }, 
  toString: function () { 
    alert("你调用了c的toString函数"); 
    return this.i; 
  } 
}; 
alert(c);

第六个

alert(bbb == '10'); // true valueOf

这个里面的判等的顺序是,获取原始值,然后判断两边的原始值是否相等,所以调用valueOf

第七个也就是最后一个

alert(bbb === '10'); // false

===操作符不进行隐式转换,判全等的第一个步骤是判断类型,因为类型都不一样了,所以后面什么都不会调用

总结:valueOf偏向于运算,toString偏向于显示。

1、 在进行强转字符串类型时将优先调用toString方法,强转为数字时优先调用valueOf。

2、 在有运算操作符的情况下,valueOf的优先级高于toString。

下面给大家简单说下valueof和tostring的区别。

valueOf():返回最适合该对象类型的原始值;

toString(): 将该对象的原始值以字符串形式返回。

这两个方法一般是交由JS去隐式调用,以满足不同的运算情况。

在数值运算里,会优先调用valueOf(),如a + b;

在字符串运算里,会优先调用toString(),如alert(c)。

以上所述是小编给大家介绍的Javascript中的valueOf与toString,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
js实现多图左右切换功能
Aug 04 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
微信小程序 开发之全局配置
May 05 Javascript
实例讲解Vue.js中router传参
Apr 22 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 #Javascript
js实现定时进度条完成后切换图片
Jan 04 #Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 #Javascript
深入理解JavaScript中的预解析
Jan 04 #Javascript
jQuery操作json常用方法示例
Jan 04 #Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 #Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 #Javascript
You might like
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
JS常用知识点整理
2017/01/21 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
python递归计算N!的方法
2015/05/05 Python
Python中的zipfile模块使用详解
2015/06/25 Python
Python实现把数字转换成中文
2015/06/29 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
书香校园活动方案
2014/02/28 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
父亲节寄语大全
2015/02/27 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python