Question

我很抱歉这个简单的问题。但我只是想知道下面的代码中发生了什么。

var indexobj = {
    test : 1,
    testFunction : function() {
        document.getElementById('AA').innerHTML = indexobj.test++;
        //this is i wanted
        document.getElementById('BB').innerHTML = this.test++;
        //NaN
        setTimeout(indexobj.testFunction,1000);
    },
}
setTimeout(indexobj.testFunction,1);

以下是

下面的示例链接

http://jsfiddle.net/apss/JR5Xk/28/

为什么在这个例子中'testFunction'函数中的'this'并不意味着'indexobj'这个对象？谢谢你的帮助。

Answer 1

由于setTimeout在global object context中运行回调函数，这意味着调用indexobj.testFunction时this为window对象。

所以你可以做到

setTimeout(function() {
    indexobj.testFunction();
},1000);

或使用Function.prototype.bind创建具有正确上下文的包装函数：

setTimeout(indexobj.testFunction.bind(indexobj), 1000);

ES2015的另一个现代选择是使用保留词汇背景的arrow function：

setTimeout(() => indexobj.testFunction(), 1000);

Answer 2

功能此设置由：

设置

如何调用该函数
使用 bind 。

来自哪里。

在这种情况下，你有：

setTimeout(indexobj.testFunction,1000);

传递 indexobj.testFunction 引用的函数，稍后由 setTimeout 调用。调用时，直接调用该函数，因此它的 this 不会被调用设置，它默认为全局对象（浏览器中的窗口）或在严格模式下保持未定义。

你可以通过多种方式解决这个问题，一种方法是在调用中传递一个将 indexobj 设置为 this 的函数：

setTimeout(function(){indexobj.testFunction()}, 1000);

或者您可以按照dfsq的建议使用 bind 。

ES6草案中的箭头功能改变了这个的设置方式，但是下一版的内容......

＆＃39;这＆＃39;在javascript中的对象中的概念

2 个答案: