javascript - 嵌套 JavaScript 函数中的 "this"

Question

function TheTable(calculateButtonId)
{
    this.errorsBlock = document.getElementById("Some Value");

    var addError = function(text) {
        this.errorsBlock.innerText += text + "\n";
    }

    var customHandler = function(desc, page, line, chr) {
        addError("[" + line + "] " + desc);
        return true;
    }
    this.init = function() {
        window.onerror = customHandler;
        ......................
    }
    this.init();
}

var table = new TheTable("BtnId");

当我将 this.addError 更改为 var addError 时，它就开始出现错误:

Cannot set property 'innerText' of undefined

您能否澄清一下，我在 var-function 内的 this 引用了什么？

Answer 1

有几件事:

• 每当您使用 new 关键字调用函数时 - 例如new TheTable("BtnId")——您创建该类型的一个新实例。该构造函数内的 this 值引用这个新实例。

• 您可以向此新实例添加任意属性。

• 一般来说，当您调用已分配给此新对象的函数时，函数内的 this 值就是同一个实例。

• var 关键字创建一个作用域为其最近的封闭函数的变量。一般来说，当您调用这种类型的函数(即作为全局或局部变量创建的函数)时，它们内部的 this 值是 window。

  <

所以当你这样做时:

this.errorsBlock = document.getElementById("Some Value");

this.addError = function(text) {
    this.errorsBlock.innerText += text + "\n";
}

this.addError("whatever");

...则 addError 内的 this 值引用分配给 errorsBlock 的同一对象，并且调用成功。但是，当您将其更改为:

var addError = function(text) {
    this.errorsBlock.innerText += text + "\n";
}

addError("whatever");

...那么 addError 中 this 的值为 window 并且 window 可能没有任何名为 errorsBlock 的函数属性并且调用失败。