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

目录
相关文章
|
7月前
|
JavaScript 前端开发
JavaScript中重排与重绘的区别及触发条件
JavaScript中重排与重绘的区别及触发条件
|
JavaScript 前端开发
js如何获取触发复制操作
在JavaScript中,可以通过以下方式来获取触发复制操作: 1. 使用`document.execCommand('copy')`来触发复制操作。可以通过事件监听,如点击按钮触发复制操作。 ```javascript document.querySelector('#copyButton').addEventListener('click', function() { document.execCommand('copy'); }); ``` 2. 监听`copy`事件,并在事件处理函数中进行相应的操作。 ```javascript document.addEventListe
246 0
|
7月前
|
JavaScript
事件触发、事件捕获与事件冒泡(js的问题)
事件触发、事件捕获与事件冒泡(js的问题)
42 0
|
4天前
|
JavaScript 前端开发
页面滚动触发css3动画js插件
delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时,为进入浏览器视口的元素制作各种炫酷的CSS3动画效果。
29 13
|
6月前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
57 7
|
3月前
|
JavaScript 前端开发
JavaScript基础知识-toString()
关于JavaScript基础知识中toString()方法的介绍。
29 1
JavaScript基础知识-toString()
|
4月前
|
JavaScript 前端开发
js点击抽奖符合条件触发点击次数
js点击抽奖符合条件触发点击次数
38 1
|
7月前
|
JavaScript 前端开发
JS tostring()和join()方法
JS tostring()和join()方法
48 1
|
7月前
|
JavaScript
原生js实现【longPressKey】长按键盘任意键(或组合键)3秒触发自定义事件(以Pause/Break键为例)
原生js实现【longPressKey】长按键盘任意键(或组合键)3秒触发自定义事件(以Pause/Break键为例)
|
7月前
|
前端开发 JavaScript
CSS+JS鼠标事件触发鼠标模形实现手状
CSS+JS鼠标事件触发鼠标模形实现手状