JS中toString和valueOf在什么时候会自动触发

简介: 本文探讨了JavaScript中`toString`和`valueOf`方法在何时会自动触发,解释了隐式类型转换时这两个方法的调用机制,并提供了多个代码示例来演示它们的自动触发情况。

隐式转换本质就是调用了valueOf或者toString方法

先看dome01: toString

        function smallFun (y){
   
            let x= 10
            let aaa = ()=>{
   }
            aaa.toString = ()=>{
   
                return x+y
            }
            return aaa
        }
        console.log(smallFun(10)) //20

上面的smallFun函数调用了一下,并传参 10
这个时候y等于10
在函数中返回了aaa函数体
但是并没有执行,我们改动了aaa原型上的toString方法,返回了结果20
说明我们打印aaa函数体的时候,它自动执行了aaa原型上的toString方法

再看dome02:valueOf

        let b= ()=>{
   }
        b.valueOf = () => {
   
            return 222
        }
        b.toString = () => {
   
            return 'bbb'
        }
        console.log(+b)  //222
        console.log(b*1) //222

同样是打印了一下b函数体,不同的是在函数体前 加了个 + ,或者是后面加了 *1
就变成了自动调用原型上的valueOf方法;
再看dome03

        let b = () => {
    }
        b.toString = () => {
   
            return 'bbb'
        }
        b.valueOf = () => {
   
            return 222
        }
        console.log(+b) //222
        console.log(b * 1) //222
        console.log(b == {
   }) //false
        console.log(b === {
   }) //false
        console.log(b == '')  //false
        console.log(Number(b))//222
        console.log(String(b))//bbb
        console.log(b.toString())//bbb
        console.log(b+1)//223
        console.log(b+'1')//2221

我们发现,当b函数体以字符串输出的时候返回的是bbb,调用了原型上的toString方法,
当以Number类型输出的时候(隐士转换也算),调用了原型上的valueOf方法。

同理 上面的例子我们再回顾一下:

         function smallFun (y){
   
            let x= 10
            let aaa = ()=>{
   }
            aaa.toString = ()=>{
   
                return x+y
            }
            aaa.valueOf=()=>{
   
                return 222
            }
            return aaa*1
        }
        console.log(smallFun(10)+1) //223

加油~

原因 :
https://www.jianshu.com/p/ace2c71bec3b
https://zhuanlan.zhihu.com/p/104362868

目录
相关文章
|
1月前
|
JavaScript 前端开发
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
这篇文章介绍了JavaScript中的数组、Date对象、Math对象以及包装类(String、Number、Boolean),并详细讲解了数组的创建、方法(如forEach、push、pop、unshift、slice、splice)和遍历操作,以及工厂方法创建对象和原型对象的概念。
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
|
4月前
|
存储 JavaScript
JS中Map对象与object的区别
JS中Map对象与object的区别
|
10月前
|
JavaScript
JS中字符串(String)常见的方法
JS中字符串(String)常见的方法
60 1
|
JavaScript
js:常见对象的类型判断typeof和布尔值Boolean
js:常见对象的类型判断typeof和布尔值Boolean
108 0
|
JavaScript 前端开发 网络安全
一个s让我花费了一两个小时 jquery 中$.ajaxSetup({async:false}); 同步不生效的问题getJSON
一个s让我花费了一两个小时 jquery 中$.ajaxSetup({async:false}); 同步不生效的问题getJSON
214 0
|
JavaScript 前端开发 Java
Javascript知识【JS-String对象&JS-Array对象&验证码切换】
JS-String对象,JS-Array对象,验证码切换,使用都很频繁
Javascript知识【JS-String对象&JS-Array对象&验证码切换】
|
JavaScript 前端开发
js中toString方法的三个作用
js中toString方法的三个作用
|
JavaScript 前端开发
细读 JS | valueOf 和 toString 方法
在讲述ToPrimitive 和 OrdinaryToPrimitive 操作时,涉及到这两方法,所以今天来简单写一下。
182 0
第192天:js---Date对象属性和方法总结
Date对象构造函数重载方法 一、第一种重载方法---基本 当前时间 1 //构造函数 - 第一种重载方法:基本 当前时间 2 console.log('构造函数 - 第一种重载方法:基本 当前时间') 3 date = new Date(); //返回时间对象 以调用getDate(),内容为当前时间 4 console.
1193 0