我的编程空间,编程开发者的网络收藏夹
学习永远不晚

如何理解toString与valueOf

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

如何理解toString与valueOf

这篇文章主要介绍“如何理解toString与valueOf”,在日常操作中,相信很多人在如何理解toString与valueOf问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何理解toString与valueOf”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

基本上,所有JS数据类型都拥有这两个方法,null除外。它们俩是位于原型链上的方法,也是为了解决javascript值运算与显示的问题。

valueOf 和 toString 几乎都是在出现操作符(+-*/==><)时被调用(隐式转换)。

toString

返回一个表示该对象的字符串,当对象表示为文本值或以期望的字符串方式被引用时,toString方法被自动调用。

1. 手动调用看看什么效果

嗯,跟介绍的一样,没骗人,全部都转成了字符串。

比较特殊的地方就是,表示对象的时候,变成[object Object],表示数组的时候,就变成数组内容以逗号连接的字符串,相当于Array.join(',')。

let a = {}  let b = [1, 2, 3]  let c = '123'  let d = function(){ console.log('fn') } console.log(a.toString())   // '[object Object]'  console.log(b.toString())   // '1,2,3'  console.log(c.toString())   // '123'  console.log(d.toString())   // 'function(){ console.log('fn') }'

2. 最精准的类型判断

这种属于更精确的判断方式,在某种场合会比使用 typeof & instanceof 来的更高效和准确些。

toString.call(()=>{})       // [object Function]  toString.call({})           // [object Object]  toString.call([])           // [object Array]  toString.call('')           // [object String]  toString.call(22)           // [object Number]  toString.call(undefined)    // [object undefined]  toString.call(null)         // [object null]  toString.call(new Date)     // [object Date]  toString.call(Math)         // [object Math]  toString.call(window)       // [object Window]

3. 什么时候会自动调用呢

使用操作符的时候,如果其中一边为对象,则会先调用toSting方法,也就是隐式转换,然后再进行操作。

let c = [1, 2, 3]  let d = {a:2}  Object.prototype.toString = function(){      console.log('Object')  }  Array.prototype.toString = function(){      console.log('Array')      return this.join(',')   // 返回toString的默认值(下面测试)  }  Number.prototype.toString = function(){      console.log('Number')  }  String.prototype.toString = function(){      console.log('String')  }  console.log(2 + 1)  // 3  console.log('s')    // 's'  console.log('s'+2)  // 's2'  console.log(c < 2)  // false        (一次 => 'Array')  console.log(c + c)  // "1,2,31,2,3" (两次 => 'Array')  console.log(d > d)  // false        (两次 => 'Object')

4. 重写toString方法

既然知道了有 toString 这个默认方法,那我们也可以来重写这个方法

class A {      constructor(count) {          this.count = count      }      toString() {          return '我有这么多钱:' + this.count      }  }  let a = new A(100)  console.log(a)              // A {count: 100}  console.log(a.toString())   // 我有这么多钱:100  console.log(a + 1)          // 我有这么多钱:1001

Nice.

valueOf

返回当前对象的原始值。

具体功能与toString大同小异,同样具有以上的自动调用和重写方法。

这里就没什么好说的了,主要为两者间的区别,有请继续往下看??

let c = [1, 2, 3]  let d = {a:2}  console.log(c.valueOf())    // [1, 2, 3]  console.log(d.valueOf())    // {a:2}

两者区别

  •  共同点:在输出对象时会自动调用。

  •  不同点:默认返回值不同,且存在优先级关系。

二者并存的情况下,在数值运算中,优先调用了valueOf,字符串运算中,优先调用了toString。

看代码方可知晓:

class A {      valueOf() {          return 2      }      toString() {          return '哈哈哈'      }  }  let a = new A()  console.log(String(a))  // '哈哈哈'   => (toString)  console.log(Number(a))  // 2         => (valueOf)  console.log(a + '22')   // '222'     => (valueOf)  console.log(a == 2)     // true      => (valueOf)  console.log(a === 2)    // false     => (严格等于不会触发隐式转换)

结果给人的感觉是,如果转换为字符串时调用toString方法,如果是转换为数值时则调用valueOf方法。

但其中的 a + '22' 很不和谐,字符串合拼应该是调用toString方法。为了追究真相,我们需要更严谨的实验。

  •  暂且先把 valueOf 方法去掉 

class A {      toString() {          return '哈哈哈'      }  }  let a = new A()  console.log(String(a))  // '哈哈哈'     => (toString)  console.log(Number(a))  // NaN         => (toString)  console.log(a + '22')   // '哈哈哈22'   => (toString)  console.log(a == 2)     // false       => (toString)
  •  去掉 toString 方法看看 

class A {      valueOf() {          return 2      }  }  let a = new A()  console.log(String(a))  // '[object Object]'    => (toString)  console.log(Number(a))  // 2                    => (valueOf)  console.log(a + '22')   // '222'                => (valueOf)  console.log(a == 2)     // true                 => (valueOf)

发现有点不同吧?!它没有像上面 toString 那样统一规整。对于那个 [object Object],我估计是从 Object 那里继承过来的,我们再去掉它看看。

class A {      valueOf() {          return 2      }  }  let a = new A()  Object.prototype.toString = null;   console.log(String(a))  // 2        => (valueOf)  console.log(Number(a))  // 2        => (valueOf)  console.log(a + '22')   // '222'    => (valueOf)  console.log(a == 2)     // true     => (valueOf)

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

  1.  在进行对象转换时,将优先调用toString方法,如若没有重写 toString,将调用 valueOf 方法;如果两个方法都没有重写,则按Object的toString输出。

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

  3.  使用运算操作符的情况下,valueOf的优先级高于toString。

[Symbol.toPrimitive]

MDN:Symbol.toPrimitive 是一个内置的 Symbol 值,它是作为对象的函数值属性存在的,当一个对象转换为对应的原始值时,会调用此函数。

是不是有点懵???把它当做一个函数就行了~~

  •  作用:同valueOf()和toString()一样,但是优先级要高于这两者;

  •  该函数被调用时,会被传递一个字符串参数

  hint

  ,表示当前运算的模式,一共有三种模式:

  •  string:字符串类型

  •  number:数字类型

  •  default:默认

下面来看看实现吧:

class A {      constructor(count) {          this.count = count      }      valueOf() {          return 2      }      toString() {          return '哈哈哈'      }      // 我在这里      [Symbol.toPrimitive](hint) {          if (hint == "number") {              return 10;          }          if (hint == "string") {              return "Hello Libai";          }          return true;      }  }  const a = new A(10)  console.log(`${a}`)     // 'Hello Libai' => (hint == "string")  console.log(String(a))  // 'Hello Libai' => (hint == "string")  console.log(+a)         // 10            => (hint == "number")  console.log(a * 20)     // 200           => (hint == "number") console.log(a / 20)     // 0.5           => (hint == "number")  console.log(Number(a))  // 10            => (hint == "number")  console.log(a + '22')   // 'true22'      => (hint == "default")  console.log(a == 10)     // false        => (hint == "default")

比较特殊的是(+)拼接符,这个属于default的模式。

划重点:此方法不兼容IE,尴尬到我不想写出来了~~

面试题分析

以下几道大厂必考的面试题,完美呈现出 toString 与 valueOf 的作用。

1. a===1&&a===2&&a===3 为 true

双等号(==):会触发隐式类型转换,所以可以使用 valueOf 或者 toString 来实现。

每次判断都会触发valueOf方法,同时让value+1,才能使得下次判断成立。

class A {      constructor(value) {          this.value = value;      }      valueOf() {          return this.value++;      }  } const a = new A(1);  if (a == 1 && a == 2 && a == 3) {      console.log("Hi Libai!");  }

全等(===):严格等于不会进行隐式转换,这里使用 Object.defineProperty 数据劫持的方法来实现

let value = 1;  Object.defineProperty(window, 'a', {      get() {          return value++      }  })  if (a === 1 && a === 2 && a === 3) {      console.log("Hi Libai!")  }

上面我们就是劫持全局window上面的a,当a每一次做判断的时候都会触发get属性获取值,并且每一次获取值都会触发一次函数实行一次自增,判断三次就自增三次,所以最后会让公式成立。

2. 实现一个无限累加函数

问题:用 JS 实现一个无限累加的函数 add,示例如下:

add(1); // 1  add(1)(2);  // 3  add(1)(2)(3); // 6  add(1)(2)(3)(4); // 10   // 以此类推  function add(a) {      function sum(b) { // 使用闭包          a = b ? a + b : a; // 累加          return sum;      }      sum.toString = function() { // 只在最后一次调用          return a;      }      return sum; // 返回一个函数  }  add(1)              // 1  add(1)(2)           // 3  add(1)(2)(3)        // 6  add(1)(2)(3)(4)     // 10
  •  add函数内部定义sum函数并返回,实现连续调用

  •  sum函数形成了一个闭包,每次调用进行累加值,再返回当前函数sum

  •  add()每次都会返回一个函数sum,直到最后一个没被调用,默认会触发toString方法,所以我们这里重写toString方法,并返回累计的最终值a

这样说才能理解:

add(10): 执行函数add(10),返回了sum函数,注意这一次没有调用sum,默认执行sum.toString方法。所以输出10;

add(10)(20): 执行函数add(10),返回sum(此时a为10),再执行sum(20),此时a为30,返回sum,最后调用sum.toString()输出30。add(10)(20)...(n)依次类推。

3. 柯里化实现多参累加

这里是上面累加的升级版,实现多参数传递累加。

add(1)(3,4)(3,5)    // 16  add(2)(2)(3,5)      // 12  function add(){      // 1 把所有参数转换成数组      let args = Array.prototype.slice.call(arguments)      // 2 再次调用add函数,传递合并当前与之前的参数      let fn = function() {          let arg_fn = Array.prototype.slice.call(arguments)          return add.apply(null, args.concat(arg_fn))      }      // 3 最后默认调用,返回合并的值      fn.toString = function() {          return args.reduce(function(a, b) {              return a + b          })      }      return fn  }  // ES6写法  function add () {      let args = [...arguments];      let fn = function(){          return add.apply(null, args.concat([...arguments]))      }       fn.toString = () => args.reduce((a, b) => a + b)      return fn;  }

到此,关于“如何理解toString与valueOf”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

如何理解toString与valueOf

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

如何理解RuntimeClass与 Pod Overhead

本篇文章为大家展示了如何理解RuntimeClass与 Pod Overhead,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。一、RuntimeClass 需求来源容器运行时的演进过程我们首先了解一
2023-06-04

如何理解PHP与MySQL通讯

如何理解PHP与MySQL通讯,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。在我们的一款WebGame的生产环境中,一次无意的strace抓包时,发现了php与mysql大
2023-06-17

如何理解Flask中的Cookie与session

如何理解Flask中的Cookie与session,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。一、Cookie的使用1、什么是Cookie我们都知道,HTTP
2023-06-21

如何理解linux进程中rootfs与linuxrc

这期内容当中小编将会给大家带来有关如何理解linux进程中rootfs与linuxrc,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。内核启动的最后阶段启动了三个进程进程0:进程0其实就是刚才讲过的idle
2023-06-06

如何理解SpringFramework与IOC依赖查找

这篇文章主要介绍“如何理解SpringFramework与IOC依赖查找”,在日常操作中,相信很多人在如何理解SpringFramework与IOC依赖查找问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何理
2023-06-15

如何理解java 多态与抽象类

今天就跟大家聊聊有关如何理解java 多态与抽象类,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。前言今天是2021LOL全球总决赛,一直不被大家看好的EDG冲到了决赛对战韩国队的DK
2023-06-25

如何理解与防范VBS脚本病毒原理

这篇文章主要介绍“如何理解与防范VBS脚本病毒原理”,在日常操作中,相信很多人在如何理解与防范VBS脚本病毒原理问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何理解与防范VBS脚本病毒原理”的疑惑有所帮助!
2023-06-08

Kafka消费与心跳机制如何理解

Kafka消费与心跳机制如何理解,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。导读kafka是一个分布式,分区的,多副本的,多订阅者的消息发布订阅系统(分布式MQ系统),可以用
2023-06-15

如何理解ASP.NET与Ajax的实现方式

如何理解ASP.NET与Ajax的实现方式,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。Ajax 应该不是一项技术,是一种思想而已,跟 ASP.NET 以及其它
2023-06-17

编程热搜

目录