0

我有以下代码：

HTML

 <button>Add Name</button>
 <ul id="names"></ul>

JS

class NameField {
    constructor(name) {
        const field = document.createElement('li');
        field.textContent = name;
        const nameListHook = document.querySelector('#names');
        nameListHook.appendChild(field);
    }
}

class NameGenerator {
    constructor() {
        const btn = document.querySelector('button');
        btn.addEventListener('click', this.addName);
    }

    addName() {
        const name = new NameField("Max");
    }
}

const gen = new NameGenerator();

所以在这里，当我单击按钮时，每次addName执行该函数并在 HTML 中打印最大值。

但是当我将行更改为：

 btn.addEventListener('click', this.addName());

然后我最初在浏览器 HTML 上打印 Max，这是预期的，因为我立即调用该函数，我没有省略().

但我不明白为什么在初始打印后，当我点击按钮时，我没有Max再次打印？这是为什么 ？

Max好的，我在 HTML 上进行了初始打印，但是当我单击按钮时，我现在不应该再次打印吗？为什么我没有得到？

4

1 回答 1

1

这是因为您必须交出对函数的引用。
如果你写

 btn.addEventListener('click', this.addName());

javascript 立即调用并执行单击按钮时this.addName()的返回值。this.addName()

但是this.addName()没有明确的返回值，所以它返回标准的 Javascript 返回值，即undefined.

所以基本上你的代码所做的是

btn.addEventListener('click', undefined);

除了这undefined是从您的调用返回的this.addName()（它运行该函数一次，因此您会看到控制台输出）。

于 2022-01-05T09:59:51.240 回答