vue中的this指向问题

最新推荐文章于 2024-11-21 11:25:20 发布

原创最新推荐文章于 2024-11-21 11:25:20 发布 · 793 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue中的this #this #vue

本文深入探讨了JavaScript中this的用法，特别是在Vue.js上下文中。在`showMessage1()`中，由于使用了非匿名函数，this在非严格模式下默认指向全局对象，导致输出为'hello'。而在`showMessage2()`里，箭头函数不创建自己的this，因此this的值继承自外层作用域，即Vue实例，输出为'你好'。本文揭示了this在不同函数类型中的行为差异及其在前端开发中的重要性。

<script type="text/javascript">
    var message = "Hello!";
    var app = new Vue({
        el:"#app",
        data:{
            message: "你好！"
        },
        created: function() {
          this.showMessage1();    //this 1
          this.showMessage2();   //this 2
        },
        methods:{
            showMessage1:function(){
                setTimeout(function() {
                   document.getElementById("id1").innerText = this.message;  //this 3
                }, 10)
            },
            showMessage2:function() {
                setTimeout(() => {
                   document.getElementById("id2").innerText = this.message;  //this 4
                }, 10)
            }
        }
    });
</script>

分别输出