Question

我有这种类结构（或多或少）：

function DataLoader = function () {
    this.setup = function () {
        this.page = new Page();
        this.page.setup();
    };

    Page = function () {
        this.apiSelect = null;
        this.onchangelistener = function () {
            //---------------- look here ---------------
            console.log(this.apiSelect); //Why is this.apiSelect undefined?
            //---------------- look here ---------------
        };

        this.setup = function () {
            this.apiSelect = document.getElementById("foo");
            //This is also weird to me, I had to do it like this
            //to get the functionality I wanted...
            document.getElementById("foo").onchange = this.onchangelistener;
        };
    };
};

var dl = new DataLoader();
dl.setup();

我对Javascript很新，现在还没有太多细节，但这对我来说似乎很奇怪。当onchange事件触发时，它调用onchangelistener。为什么this.apiSelect未定？我的意思是我已经为它添加了一个值。

我目前的代码如下所示

Answer 1

 ...
 Page = function () {
        var self = this;
        this.apiSelect = null;
        this.onchangelistener = function () {
            console.log(self.apiSelect);
        };

在onchangelistener函数内部，this的引用与外部作用域中的this不同。因此，您需要创建对外this（带var self = this;）的引用，并在函数内使用它

Answer 2

Page = function () {
        var apiSelect = null;
        this.onchangelistener = function () {
            console.log(apiSelect);
        };
        ...
};

这种情况正在发生，因为this被绑定到新的“内部”函数，并且不知道apiSelect数据成员是什么。

对象结构中未定义变量的问题

2 个答案: