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");

...然后this内的addError的值指的是errorsBlock分配给的同一个对象，并且调用成功。但是，当您将其更改为：

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

addError("whatever");

...然后this内的addError的值为window，而window可能没有任何名为errorsBlock的函数属性和调用失败。

Answer 2

function TheTable(calculateButtonId) {
    this.errorsBlock = document.getElementById("Some Value");
    var self = this;
    var addError = function(text) {
        self.errorsBlock.innerText += text + "\n";
    }
}

这在javascript中始终是运行函数的上下文。

嵌套JavaScript函数中的“this”

2 个答案: