[JavaScript知识库]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>

分别输出

hello

你好

在我们的showmessage1()中我们用的是常规的非匿名的函数,而我们的showmessage2()则用的是我们的匿名函数。

在我们的showMessage1()中,在非严格模式下，如果没有直接调用者我们的this是指向windows所以输出的是hello

在我们的showMessage2()中箭头函数是没有自己的this，在塔内布使用的this是有它的宿主对象决定的。宿主对象定义为vue实例，所以这里面的this指向的是vue实例。