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

目录
相关文章
|
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
333 0
|
JavaScript
事件触发、事件捕获与事件冒泡(js的问题)
事件触发、事件捕获与事件冒泡(js的问题)
86 0
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
134 7
|
9月前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
265 3
|
10月前
|
JavaScript 前端开发
页面滚动触发css3动画js插件
delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时,为进入浏览器视口的元素制作各种炫酷的CSS3动画效果。
127 13
|
JavaScript 前端开发
JavaScript基础知识-toString()
关于JavaScript基础知识中toString()方法的介绍。
66 1
JavaScript基础知识-toString()
|
JavaScript 前端开发
js点击抽奖符合条件触发点击次数
js点击抽奖符合条件触发点击次数
84 1
|
JavaScript 前端开发
JS tostring()和join()方法
JS tostring()和join()方法
161 1
|
JavaScript
原生js实现【longPressKey】长按键盘任意键(或组合键)3秒触发自定义事件(以Pause/Break键为例)
原生js实现【longPressKey】长按键盘任意键(或组合键)3秒触发自定义事件(以Pause/Break键为例)

热门文章

最新文章