valueOf与toString

valueOftoStringObject.prototype上的方法,在Js几乎所有的对象都会继承自Object,同样由于包装对象的原因,几乎所有的数据类型都能够调用这两个方法,无法调用的有例如nullundefined以及Object.create(null)创建的对象等,通常我们一般不会主动调用这两个方法,而在代码执行的过程中这两个方法会经常被偷偷的调用,而且在不同的情况下会有选择的进行调用。

valueOf

JavaScript通过调用valueOf方法将对象转换为原始值,我们很少需要自己调用valueOf方法,当遇到要预期的原始值的对象时,JavaScript会自动调用它。默认情况下,valueOf方法由Object后面的每个对象继承。每个内置的核心对象都会覆盖此方法以返回适当的值,如果对象没有原始值,则valueOf将返回对象本身。

JavaScript的许多内置对象都重写了该函数,以实现更适合自身的功能需要。因此不同类型对象的valueOf方法的返回值和返回值类型均可能不同。

对象 返回值
Array 返回数组对象本身。
Boolean 布尔值。
Date 存储的时间是从197011日午夜开始计的毫秒数UTC
Function 函数本身。
Number 数字值。
Object 默认情况下返回对象本身。
String 字符串值。
var arr = [];
console.log(arr.valueOf() === arr); // true var date = new Date();
console.log(date.valueOf()); // 1376838719230 var num = 1;
console.log(num.valueOf()); // 1 var bool = true;
console.log(bool.valueOf() === bool); // true var newBool = new Boolean(true);
console.log(newBool.valueOf() === newBool); // false // 前者是bool 后者是object function funct(){}
console.log(funct.valueOf() === funct); // true var obj = {};
console.log(obj.valueOf() === obj); // true var str = "";
console.log(str.valueOf() === str); // true var newStr = new String("");
console.log(newStr.valueOf() === newStr); // false // 前者是bool 后者是object

前文提到过在JavaScript运行的过程中valueOf方法经常会被偷偷的调用,我们可以自行重写valueOf方法,在def.js中甚至相当灵活使用valueOf等方式实现了Ruby风格的类定义工厂,以Child << Parent的风格实现了继承。

class ValueOfTest{
constructor(val){
this.val = val;
}
valueOf(){
return this.val;
}
} var v = new ValueOfTest(10);
console.log(v + 1); // 11

toString

JavaScript通过调用toString方法返回一个表示该对象的字符串,每个对象都有一个toString方法,当该对象被表示为一个文本值时,或者一个对象以预期的字符串方式引用时自动调用。默认情况下,toString()方法被每个Object对象继承,如果此方法在自定义对象中未被覆盖,toString返回[object type],其中type是对象的类型。

JavaScript的许多内置对象都重写了该函数,以实现更适合自身的功能需要。因此不同类型对象的toString方法的返回值和返回值类型均可能不同。

对象 返回值
Array 以逗号分割的字符串,如[1,2]toString返回值为1,2
Boolean 布尔值的字符串形式。
Date 可读的时间字符串,例如Tue Oct 27 2020 16:08:48 GMT+0800 (中国标准时间)
Function 声明函数的Js源代码字符串。
Number 数字值的字符串形式。
Object [object Object]字符串。
String 字符串。
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3 var date = new Date();
console.log(date.toString()); // Tue Oct 27 2020 16:12:35 GMT+0800 (中国标准时间) var num = 1;
console.log(num.toString()); // 1 var bool = true;
console.log(bool.toString()); // true function funct(){ var a = 1; }
console.log(funct.toString()); // function funct(){ var a = 1; } var obj = {a: 1};
console.log(obj.toString()); // [object Object] var str = "1";
console.log(str.toString()); // 1

对比

JavaScript在不同情况下,会调用不同的方法去处理值,通常来说是会优先调用toString()方法,而有运算操作符的情况下valueOf()的优先级高于toString(),当调用valueOf()方法无法运算后还是会再调用toString()方法。

var v = {
val: 10,
valueOf: function(){
console.log("valueOf");
return this.val;
},
toString: function(){
console.log("toString");
return this.val;
}
} var obj = {"10": 1}; console.log(v); // {val: 10, valueOf: ƒ, toString: ƒ}
console.log(1+v); // valueOf // 11
console.log(obj[v]); // toString // 1
console.log("" + v); // valueOf // 10
console.log(String(v)); // toString // 10
console.log(Number(v)); // valueOf // 10
console.log(v == 10); // valueOf // true // 只有在==的情况下才有可能调用valueOf 在===的情况下object与number不可能相等

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://github.com/tobytailor/def.js
https://juejin.im/post/6844903812117839879
https://juejin.im/post/6844903967097356302
https://cloud.tencent.com/developer/article/1495536
https://www.cnblogs.com/rubylouvre/archive/2010/10/01/1839748.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toString

valueOf与toString的更多相关文章

  1. Javascript中的valueOf与toString

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

  2. valueOf和toString的区别

    基本上所有的JavaScript数据类型都有valueOf(),toString()方法,null除外,这两个方法解决了JavaScript值运算和显示的问题 valueOf()会把数据类型转换成原始 ...

  3. valueOf和toString

    有一道经典的题目: var add = function() {___}; console.log(add(3)(4)(5)); // 输出60 题目要求能无限相乘,请补充add函数. 首先很显然,a ...

  4. Javascript中valueOf与toString区别

    前言 基本上,所有JS数据类型都拥有这两个方法,null除外.它们俩解决JavaScript值运算与显示的问题,重写会加大它们调用的优化. 测试分析 先看一例:var aaa = {  i: 10,  ...

  5. JavaScript的valueOf和toString

    深度好文 http://www.cnblogs.com/coco1s/p/6509141.html 知识要点 不同对象调用valueOf和toString的顺序不一样 高阶函数的使用,替代for循环 ...

  6. JS类型转换之valueOf和toString详解

    最近群里有人发了下面这题: 实现一个函数,运算结果可以满足如下预期结果: add(1)(2)// 3 add(1,2,3)(10)// 16 add(1)(2)(3)(4)(5)// 15 对于一个好 ...

  7. JavaScript中的valueOf与toString方法

    基本上,所有JS数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题. JavaScript 的 valueOf() 方法 valu ...

  8. 深入理解Javascript中的valueOf与toString

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

  9. valueOf()、toString()

    基本上,所有JS数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题. JavaScript 的 valueOf() 方法 valu ...

  10. String、String.valueOf、toString 它们三者的区别总结

    今天在使用这个的时候发现,他们三者好像在某些场所都是可以用的,但是不免会让人想到那既然它们三者这么的相似,那么总有些什么区别吧.我也在网上找了一些资料看.自己也看了API文档,就将他们三的区别总结一下 ...

随机推荐

  1. C++11 同步与互斥

    C++11 同步与互斥 0. C++11的线程 #include <thread> 面向对象的接口 RAII(资源获取即初始化)机制,当线程对象被销毁时,会自动执行析构函数,如果线程仍然在 ...

  2. [转帖]SQL SERVER中隐式转换的一些细节浅析

    https://www.cnblogs.com/kerrycode/p/5853257.html 其实这是一篇没有技术含量的文章,精通SQL优化的请绕道.这个缘起于在优化一个SQL过程中,同事问了我一 ...

  3. [转帖]如何监控Redis性能指标(译)

    Redis给人的印象是简单.很快,但是不代表它不需要关注它的性能指标,此文简单地介绍了一部分Redis性能指标.翻译过程中加入了自己延伸的一些疑问信息,仍然还有一些东西没有完全弄明白.原文中Metri ...

  4. [转帖]PostgreSQL中的schema和user

    https://www.cnblogs.com/abclife/p/13905336.html postgresql中,用户创建的所有对象都被创建在指定的schema(或namespace)中.其他用 ...

  5. [转帖]CentOS-7-x86_64-DVD-2009 rpm包列表(centos7.9)

    https://www.cnblogs.com/hiyang/p/14803391.html 文件数 4071 个,共3.8G 复制389-ds-base-1.3.10.2-6.el7.x86_64. ...

  6. [转帖] Jmeter学习笔记(七)——监听器元件之察看结果树

    https://www.cnblogs.com/pachongshangdexuebi/p/11507289.html 在jmeter中,如果我们需要查看请求结果就需要添加查看结果树,这个监听器元件有 ...

  7. [转帖]Kafka 核心技术与实战学习笔记(七)kafka集群参数配置(上)

    一.Broker 端参数 Broke存储信息配置 log.dirs:非常重要,指定Broker需要使用的若干文件目录路径,没有默认值必须亲自指定. log.dir:他只能表示单个路径,补充上一个参数用 ...

  8. [转帖]awk命令 去掉重复行

    https://developer.aliyun.com/article/885946?spm=a2c6h.24874632.expert-profile.263.7c46cfe9h5DxWK lin ...

  9. TienChin 渠道管理-添加渠道页面开发

    略过,前面已将渠道管理的 index.vue 文件内容全部粘贴给你们了.

  10. 基于 hugging face 预训练模型的实体识别智能标注方案:生成doccano要求json格式

    强烈推荐:数据标注平台doccano----简介.安装.使用.踩坑记录_汀.的博客-CSDN博客_doccano huggingface官网 参考:数据标注平台doccano----简介.安装.使用. ...