vue中箭头函数this的指向

柠檬boy

已于 2022-09-11 21:27:13 修改

阅读量762

点赞数 2

文章标签： vue.js javascript 前端

于 2022-09-09 17:06:20 首次发布

本文链接：https://blog.youkuaiyun.com/qq_60891094/article/details/126786121

版权

<body>
    <div id="app">
        <h1>开始练习</h1>
        <h2>两秒之后下课</h2>
        <button @click="butt">提交</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data() { //只要data中的数据改变，vue一定会重新解析模板
                return {
                }
            },
            methods: {
                butt(value) {
                    // setTimeout(() => {
                    //     console.log(this, '下课了');
                    // }, 2000);

                    setTimeout(function() {
                        console.log(this, '下课了');
                    }, 2000)
                }
            }
        })
    </script>
</body>

两秒后输出的结果时window，这是因为定时器所指定的回调函数是由js引擎window所调用的

<body>
    <div id="app">
        <h1>开始练习</h1>
        <h2>两秒之后下课</h2>
        <button @click="butt">提交</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data() { //只要data中的数据改变，vue一定会重新解析模板
                return {
                }
            },
            methods: {
                butt(value) {
                     setTimeout(() => {
                         console.log(this, '下课了');
                     }, 2000);

                    //setTimeout(function() {
                    //    console.log(this, '下课了');
                    //}, 2000)
                }
            }
        })
    </script>
</body>