javascript - 为什么点击按钮时模块中找不到 "this"？

Question

我在创建模块时遇到一个问题。我在单击按钮时附加一个列表项，但我的对象属性未定义，为什么？ this.config ??

这是我的代码 https://jsfiddle.net/5hrcwj8g/

点击按钮

我正在调用这个函数

Nav.prototype.addItems = function() {
        console.log(this.config)
        this.config.$navigationPanel.append('<li>tens</li>');
    };

这一行给出了未定义的原因？

console.log(this.config)

提出更好的解决方案

var Nav = (function() {
    function Nav() {
        this.config = {
            $navigationPanel: $('#navigationPanel ul'),
            $addItems: $('#adItems')
        };
    }
    Nav.prototype.init = function() {
    console.log(this.config)
        this.attachHandlers();
    };
    Nav.prototype.addItems = function() {
        console.log(this.config)
        this.config.$navigationPanel.append('<li>tens</li>');
    };
    Nav.prototype.attachHandlers = function() {
        this.config.$addItems.on('click', this.addItems);
    };
    return Nav;
})();
$(function() {
    var n =  new Nav();
    n.init();
});

Answer 1

按如下方式更新您的 attachHandlers 函数 -

Nav.prototype.attachHandlers = function() {
    this.config.$addItems.on('click', this.addItems.bind(this));
};

由于 addItems 是一个事件回调函数，因此它不会获取对 Nav 类的 this 引用。通过绑定(bind) Nav 类的 this 引用，同时分配点击事件处理程序，addItems 函数可以访问 Nav 类引用。