javascript - Why is this one says undefined?

Question

<section id="clickme">
     <p>Stuff goes here.</p>
</section>


$("#clickme").on("click", function(){
    alert(this.innerHTML);
    setTimeout(function(){
                alert(this.innerHTML);
    }, 1000);
})

Does anyone know why the second alert is undefined?

Answer 1

this变化。您可以通过代理this（将其保存在其他地方）来避免它：

var that = this;
setTimeout(function(){
            alert(that.innerHTML);
}, 1000);

或通过使用bind（有效地做同样的事情）。

Answer 2

正如@jaeheung 回答的那样：

setTimeout() 是 Window 对象的一个​​方法。而“this”指向没有innerHTML 的Window。

只需创建一个变量来存储对象，这样就不会发生冲突。

$("#clickme").on("click", function(){
    var myObj = this;
    alert(myObj.innerHTML);
    setTimeout(function(){
                alert(myObj.innerHTML);
    }, 1000);
})

Answer 3

setTimeout() 是 Window 对象的一个​​方法。而“this”指向没有innerHTML 的Window。

Answer 4

上下文在内部函数中发生变化。如果要在其中使用目标，则需要设置一个等于this它之前的 var，如下所示：

$("#clickme").on("click", function(){
    alert(this.innerHTML);
    var that = this;
    setTimeout(function(){
                alert(that.innerHTML);
    }, 1000);
})

小提琴

Answer 5

您的代码相当于：

$("#clickme").on("click", function(){
    alert(this.innerHTML);             // `this` points to the event object (`section`)
    window.setTimeout(function(){      // notice the 'window.'
                alert(this.innerHTML); // `this` now points to `window`
    }, 1000);
})

undefined错误来了，因为转换this.innerHTML为，window.innerHTML因为内部this指向window. 该window对象没有innerHTML属性，因此它会产生一个undefined属性。

为了使用section元素对象，您需要将其缓存在某个变量中：

$("#clickme").on("click", function(){
    var _this = this;                  // cached
    alert(_this.innerHTML);            // use cached
    setTimeout(function(){
       alert(_this.innerHTML);         // use cached
    }, 1000);
})

或者，我不确定在 IE 中是否有效的一种方法是将其作为参数传递给setTimeout：

$("#clickme").on("click", function(){
    alert(this.innerHTML);              // `this` points to the event object (`section`)
    setTimeout(function(_this){         // notice the `_this` as a parameter
                alert(_this.innerHTML); // `_this` now points to the argument
    }, 1000, this);                     // pass it here
})