javascript - 折叠侧边栏不是一个函数

Question

我正在为一个项目编写一个脚本，它有一个功能可以在单击 hamdurger 图标时折叠或打开侧边栏，但是当我单击它时会出现错误

TypeError: this.CollapseSidebar is not a function

以下是我的代码:

(function($) {
    'use strict';
    var Prtm = {
        Constants: {
            LEFTMARGIN:'315px',
            COLLAPSELEFTMARGIN: '63px',
        },
        PrtmEle:{
            BODY: $('body'),
            SIDEBAR: $('.prtm-sidebar'),
            SIDENAV: $('.sidebar-nav'),
            MAIN: $('.prtm-main'),
            HEADER: $('.prtm-header'),
            CONTENTWRAP: $('.prtm-content-wrapper'),
            CONTENT: $('.prtm-content'),
            PRTMBLOCK: $('.prtm-block'),
            FOOTER: $('.prtm-footer'),
            HAMBURGER: $('.prtm-bars'),
        },
        Init:function(){
            this.BindEvents();
        },
        BindEvents:function(){
            this.PrtmEle.BODY.on('click',this.PrtmEle.HAMBURGER,function(){
                this.CollapseSidebar();
            });
        },
        CollapseSidebar: function(){
            this.PrtmEle.HAMBURGER.toggleClass("prtm-sidebar-closed is-active");
            this.PrtmEle.BODY.toggleClass("prtm-sidebar-closed is-active");
            this.PrtmEle.SIDEBAR.toggleClass('collapse');
        },
    };
    Prtm.Init();
})(jQuery);

当我将 this.CollapseSidebar 更改为 Prtm.CollapseSidebar 时，它可以正常工作。我在这里做错了什么以及如何解决？

Answer 1

为什么它不起作用？因为function()绑定(bind)了它自己的this。

您可以做的一件事是使用 Arrow function不绑定(bind)自己的 this - 像这样:

BindEvents:function(){
    this.PrtmEle.BODY.on('click',this.PrtmEle.HAMBURGER,() => {
        this.CollapseSidebar();
    });
}

在您的点击函数中this将引用窗口 - 因此您可以创建一个如下所示的临时变量或使用< em>箭头函数:

BindEvents:function() {
    let $this = this;
    this.PrtmEle.BODY.on('click',this.PrtmEle.HAMBURGER,function() {
        $this.CollapseSidebar();
    });
}