vue 正确使用 setTimeout

2019-07-09  本文已影响0人  头脑之外

箭头函数是没有自己的this,在它内部使用的this是由它定义的宿主对象决定

        let self = this;
        setTimeout(() => {
        self.loading();
        }, 1000);

如果我们直接使用this获取该函数

        setTimeout(this.loading(), 1000);

这种写法在vue里面可能会调用失败,为啥呢?
对于普通函数(包括匿名函数),this指的是直接的调用者,在非严格模式下,如果没有直接调用者,this指的是window

vue this指向问题

箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this。
使用call,apply,bind绑定的,this指的是绑定的对象

    var self = this;
    setTimeout(function() {
       document.getElementById("id1").innerText = self.message;  //改为self
    }.bind(this), 10)
上一篇 下一篇

猜你喜欢

热点阅读