美文网首页
vue 正确使用 setTimeout

vue 正确使用 setTimeout

作者: 头脑之外 | 来源:发表于2019-07-09 12:32 被阅读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)
    

    相关文章

      网友评论

          本文标题:vue 正确使用 setTimeout

          本文链接:https://www.haomeiwen.com/subject/oofahctx.html