Javascript 为什么我会得到TypeError X不是一个函数

我有一个具有函数的对象。当我调用函数时，它抛出的是一个TypeError，而不是一个函数。但是，该函数看起来是正确的

抛出类型错误的函数是showSection。showAddCreatureSection正在调用它。hideSection、hideAddCreatureSection、hideEncounterLog函数都在工作

我不知道hideSection为什么抛出typeError并查找原因

JavaScript

let informationArea = {
    informationArea: document.getElementById('tracker_additional_area'),
    addCreatureSection: document.getElementById('addCreatures'),
    encounterLogSection: document.getElementById('log'),

    hideSection: function(section_to_be_hidden){
        section_to_be_hidden.classList.add('hide');
    },

    showSection: function(section_to_be_shown){
        console.log('showSection');
        section_to_be_shown.classList.remove('hide');
    },

    hideAddCreatureSection: function(){
        this.hideSection(this.addCreatureSection);

        if(is_encounter_running === false || is_encounter_started === false){
            trackerButtons.add_creature_button.classList.remove('hide');
        }
    },

    showAddCreatureSection: function(){
        console.log('showAddCreatureSection');
        this.showSection(this.addCreatureSection);
    },

    hideEncounterLog: function(){
        this.hideSection(this.encounterLogSection);
    },

    showEncounterLog: function(){
        this.showSectionInInformationArea(this.encounterLogSection);
    },

    closeSection: function(exit_section_button){
        switch(exit_section_button.getAttribute('id')){
            case 'addCreatures':
                this.hideAddCreatureSection();
                break;
            case 'encounterLog':
                this.hideEncounterLog();
                break;
        }
    }
};
trackerButtons.add_creature_button.addEventListener('click',informationArea.showAddCreatureSection);

---

这里的问题是注册

addEventListner（）

函数会导致

this

引用

窗口

对象，而不是您期望的上下文

如果可以使用ES6 arrow函数，您可能希望将代码更改为：

trackerButtons.add_creature_button.addEventListener('click', () => { informationArea.showAddCreatureSection });

如果没有，请使用：

trackerButtons.add_creature_button.addEventListener('click', function () { informationArea.showAddCreatureSection }.bind(this));

---

这里的问题是注册

addEventListner（）

函数会导致

this

引用

窗口

对象，而不是您期望的上下文

如果可以使用ES6 arrow函数，您可能希望将代码更改为：

trackerButtons.add_creature_button.addEventListener('click', () => { informationArea.showAddCreatureSection });

如果没有，请使用：

trackerButtons.add_creature_button.addEventListener('click', function () { informationArea.showAddCreatureSection }.bind(this));

---

当您以这种方式设置事件处理程序时，对象和函数之间的关系被破坏，因此当“单击”发生时，此将不具有正确的值。箭头函数ftw当您以这种方式设置事件处理程序时，对象和函数之间的关系被破坏，因此，

当“click”发生时，这个

将不会有正确的值。箭头函数ftw箭头函数不起作用，但我创建了回调函数（）{informationArea.showAddCreatureSection}，现在可以工作箭头函数不起作用，但我创建了回调函数（）{informationArea.showAddCreatureSection}，现在可以工作了