javascript - 在事件处理程序中触发类方法

Question

class Controller {

    constructor(names){
        this.names = names;
    }

    sayhello(name){
        console.log("Hello " + name);
    }

    makeLink() {
        this.names.forEach(function(name){
            var link = document.createElement('li');
            link.innerHTML = name;
            var container = document.getElementById('container');
            container.appendChild(link);
            link.addEventListener('click', (event) => {
                sayhello(event.target.innerText);
            });
        });
    }
}

这是我在实际代码中尝试做的一个例子。我想在单击“li”时触发类方法“sayhello”，以便它打印出与“li”对应的名称。但是，它似乎没有用。我尝试寻找解决方案，但仍然没有找到它。有谁知道我可以如何进行这项工作？

Answer 1

sayhello 不存在于 makeLink 的范围内，但存在于它的上下文中(又名 this)，所以你必须注意通过 forEach function 不松散上下文，那么您可以轻松访问它:

makeLink() {
    this.names.forEach((name) => { // <----
        var link = document.createElement('li');
        link.innerHTML = name;
        var container = document.getElementById('container');
        container.appendChild(link);
        link.addEventListener('click', (event) => {
            this.sayhello(event.target.innerText); // <----
        });
    });
}