如何将参数传递给绑定函数？

Question

我正在努力实现以下韵律：

document.onload = init();

function Dropdown(dd) {
    this.dd = dd;
    this.exapnded = false;
    this.list = dd.querySelector('.list');

    this.changeState = changeState.bind(this);
    this.dd.addEventListener('click', this.changeState(event));
}

function changeState(e) {
    if(this.expanded == true) {
        this.list.style.display = 'none';
        this.expanded = false;
        e.stopPropagation();
    }
    else {
        this.list.style.display = 'block';
        this.expanded = true;
        e.stopPropagation();
    }
}

function init() {
    let ddCollection = document.getElementsByClassName('dropdown');

    Array.from(ddCollection)
        .forEach(function(ddElement) {
            let dropdown = new Dropdown(ddElement);
            console.log(dropdown);
        }
    );
}

但是，当然，对于我所知道的悲惨 Javascript 代码，当我尝试执行上述代码时，它失败了

Uncaught TypeError: this.list is undefined

这意味着无论我在做什么，都不会将我的 this 对象绑定到 changeState 函数。

如果我尝试如下尝试，结果也不会改变

this.dd.addEventListener('click', changeState(event).bind(this));

遇到这种情况，我该如何实现呢？ Vanilla Javascript 请只回答。

我一直在为此绞尽脑汁，并尝试了 Whosebug 上可用的所有可能解决方案，但似乎没有任何效果。我希望我已经足够恰当地表达了我的问题。如果您需要任何进一步的说明，请在下方发表评论。

Answer 1

您应该只将函数附加到 Dropdown.prototype 而不是将其附加到对象实例：

Dropdown.prototype.changeState = function (e) {
    if (this.expanded == true) {
        this.list.style.display = 'none';
        this.expanded = false;
        e.stopPropagation();
    } else {
        this.list.style.display = 'block';
        this.expanded = true;
        e.stopPropagation();
    }
};

另外，这样写事件监听器，否则你会立即调用该函数而不是注册它以备将来点击反应。

this.dd.addEventListener('click', event => this.changeState(event));

如何将参数传递给绑定函数？

How can I pass parameters to a bound function?

javascript

oop

bind