Question

我有两个同名的函数，但我认为它们是本地化的所以我不确定我在这里不理解，似乎其中一个函数没有创建或者其他东西。

我的代码设置如下 - 它从底线开始：

function getDiv(id)    {
    return document.getElementById(id);
}


var account = new function(){

    this.load = function(){     
        //load user data from server to elements
    }


    this.init = function(){
        this.load(); //ERROR : this.load is not a function
    }
}

var template = new function(){    

    this.addEvents = function(){ 
         var el = getDiv('output');
         el.addEventListener('mousedown',account.init,false);

    }

    this.load = function(){ 
        //load template to page
        this.addEvents();
    }


    this.init = function(){
        this.load();
    }
}

template.init(); //start of the script: load template

我希望在遵循代码的地方时有合理的理由，但我不理解为什么在account.init我得到错误，但对于template.init我没有 - 他们是非常相似的设置。< / p>

造成这种情况的原因是什么，我将如何解决？

Answer 1

不会使用与this相同的值调用事件监听器，因为它们已添加到上下文中。

要设置所使用的this的值，您可以使用bind功能：

el.addEventListener('mousedown', account.init.bind(account), false);

Answer 2

创建事件监听器el.addEventListener('mousedown',account.init,false);时，元素el成为account.init的范围，然后this将引用该范围。要避免它，请将对this的引用保存为闭包。

var account = new function(){
    var self = this;
    this.load = function(){     
        //load user data from server to elements
    }
    this.init = function(){
        self.load(); // "this" as in "account" is accessible here through the closure "self"
    }
}

关于this和关闭https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

的信息

函数未定义 - 不明白为什么

2 个答案: