javascript中的这个属性作用域

Question

我有一个代码，

var a= document.getElementById("demo");
a.onclick = function(){
   alert(this.innerHTML)
   setTimeout(function(){
        alert(this.innerHTML)
  },1000);
}

我从第一个警报语句得到正确的innerHTML值。但是我在第二个警报语句中得到了未定义的值。有人能解释一下吗?

Answer 1

因为在函数中有嵌套函数，在嵌套函数中this关键字将指向窗口。

你可以这样写:

var a= document.getElementById("demo");
a.onclick = function(){
   var that = this;
   alert(this.innerHTML)
   setTimeout(function(){
        alert(that.innerHTML)
  },1000);
}

或者，您可以使用bind方法:

var a= document.getElementById("demo");
a.onclick = function(){
  //var that = this;
   alert(this.innerHTML)
   setTimeout(function(){
        alert(this.innerHTML)
  }.bind(this),1000); // now this refers to the clicked element
}

Answer 2

这是不正确的，setTimeout中的this范围为window对象。您必须保存最后一个作用域并使用它。例如setTimeout:

之前的var that = that

var a= document.getElementById("demo");
a.onclick = function(){
   // save scope
   var that = this;
   alert(this.innerHTML)
   setTimeout(function(){
        // since this is a new function, the "this" refers to the window object.
        alert(that.innerHTML) // changed "this" to "that"
  },1000);
}