setTimeout中的this

最新推荐文章于 2024-06-22 21:39:25 发布

原创最新推荐文章于 2024-06-22 21:39:25 发布 · 221 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

9 篇文章

订阅专栏

本文通过具体示例探讨了在JavaScript中使用setTimeout时this关键字的行为差异。解释了直接调用与通过引用调用sayName方法时this的不同作用域，以及如何保持期望的this上下文。

var f  = function(){
     this.fname = 'F Function';
};

//invoke from bar and bar2 func
f.prototype.sayName = function(){
     alert(window == this); // when  invoke from bar then true， bar2 then false

     alert(this.fname); //when invoke from bar then 'undefined'， bar2 then 'F Function'
};

//invoke sayName func in setTimeout
f.prototype.bar = function(){
     setTimeout(this.sayName,1000);

     // or
     //var that = this;
    //setTimeout(that.sayName,1000); alert(window == this) remain show false in sayName fun
};

//invoke sayName func in setTimeout
f.prototype.bar2 = function(){
    var that = this;
    setTimeout(function(){that.sayName()},1000)
}

var ins = new f();
ins.bar(); //true 'undefined'
ins.bar2(); // false 'F Function'

以上例子能解释 this 在setTimeout 中的含义。

原因（https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout#The_%27this%27_problem）：