javascript - 自定义对象内的范围问题

Question

我认为我遇到了范围可见性问题，我无法准确地弄清楚:当我记录变量 displayatonce 时，我得到了正确的结果，但是当我尝试使用按钮时，我得到了没有任何返回。我也尝试过记录 this.navbuttons 但我得到的只是一个空集...我真的不明白这段代码有什么问题。

<!-- html code -->
<div id="nav">
<a href="#" data-dir="prev">Previous</a>
<a href="#" data-dir="next">Next</a>
</div>

/* Js Script with jQuery */
(function() {

var NewsNavigator = {

    init: function(config) {
        this.navbuttons = config.navbuttons;
        this.displayatonce = config.displayatonce;
        this.counter = 0;
        this.showNews();
        this.enableNav();

    },

    showNews: function() {
        console.log(this.displayatonce);
    },

    enableNav: function() {
                    console.log(this.navbuttons);
        this.navbuttons.on('click', function() {
            console.log("clicked");
        });
    }

};

NewsNavigator.init({
    displayatonce: 3,
    navbuttons: $('div#nav').find('a')
});
})();

Answer 1

发生这种情况是因为当您使用立即执行函数的 (function())(); 时，可能它正在运行 dom is ready 之前的代码。

下面的演示一切正常

DEMO

将所有代码放入文档就绪中，或者至少在文档就绪 block 中调用initialize方法，例如

 $(function(){
    NewsNavigator.init({
        displayatonce: 3,
        navbuttons: $('div#nav').find('a')
    });
});

在此处阅读有关Javascript自执行匿名函数的更多信息

Javascript self executing function "is not a function"

或

http://markdalgleish.com/2011/03/self-executing-anonymous-functions/