Question

尝试在我的closeOpenNavDropdowns函数中调用toggleDropdownNavState函数，但没有任何内容正在运行，我没有收到错误。我检查了编译后的代码，它就在那里。

编辑：尝试调用类似this.closeOpenNavDropdowns();的fn会给我Uncaught TypeError: this.closeOpenNavDropdowns is not a function

const aboutDropdownNav = {
    setup() {
        $('.nav__main__about-dropdown--js').click(this.toggleDropdownNavState);

        // Handlers for when user clicks outside the dropdown to close
        $(document).click(function(event) {
            if ($('body').hasClass('about-dropdown--open') && !$(event.target).parents('.about-us-dropdown').length) {
                $('body').removeClass('about-dropdown--open');
            }
        })
    },
    toggleDropdownNavState(e) {
        e.stopPropagation();
        e.preventDefault();
        $('body').toggleClass('about-dropdown--open');
        this.closeOpenNavDropdowns;
    },
    closeOpenNavDropdowns() {
        console.log('closeOpenNavDropdowns in aboutDropdown.js');            
        $('body').removeClass('solutions-dropdown--open'); //close solution dropdown if its open
    }
}

module.exports = aboutDropdownNav;

以上代码由另一个文件调用：

var aboutDropdownNav = require('./nav-about-dropdown');

module.exports = function() {
    // About Dropdown Nav
    aboutDropdownNav.setup();
}

Answer 1

当调用this.toggleDropdownNavState时，上下文错误，将其绑定到正确的上下文。

$('.nav__main__about-dropdown--js').click(this.toggleDropdownNavState.bind(this));

您缺少方括号()来调用该函数，只需引用该函数。

toggleDropdownNavState(e) {
    e.stopPropagation();
    e.preventDefault();
    $('body').toggleClass('about-dropdown--open');
    this.closeOpenNavDropdowns();
},

Answer 2

toggleDropdownNavState函数附加到eventListener。在事件处理函数内部，this是对事件当前目标的引用。这就是为什么closeOpenNavDropdowns不是this引用的对象中的函数的原因。

有很多方法可以解决这个问题。其中之一是使用Function.prototype.bind强制closeOpenNavDropdowns函数与对象之间的绑定。

const aboutDropdownNav = {

setup: function() {
    
    $('.nav__main__about-dropdown--js').click(this.toggleDropdownNavState.bind(this));

    // Handlers for when user clicks outside the dropdown to close
    $(document).click(function(event) {
        if ($('body').hasClass('about-dropdown--open') && !$(event.target).parents('.about-us-dropdown').length) {
            $('body').removeClass('about-dropdown--open');
        }
    })
},
toggleDropdownNavState : function(e) {
    e.stopPropagation();
    e.preventDefault();
    $('body').toggleClass('about-dropdown--open');
    this.closeOpenNavDropdowns();
},
closeOpenNavDropdowns : function() {
    console.log('closeOpenNavDropdowns in aboutDropdown.js');

    $('body').removeClass('solutions-dropdown--open'); //close solution dropdown if its open
}

}

aboutDropdownNav.setup();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="nav__main__about-dropdown--js" value="Click"/>

在ES6中调用函数

2 个答案: