Javascript自定义HtmleElement问题

我正在用HtmleElement创建一个自定义“计数器”组件

以下是此组件的HTML：

<template id="counter-template">
  <div class='counter__wrapper'>
    <h2 id='counter__status'></h2>
    <button id='continue'>Continue</button>
    <button id='stop'>Stop</button>
  </div>
</template>
<script src="Counter.js"></script>

该组件工作正常，但我在setInterval函数中使用它，其中我将“count”属性设置为interval的迭代器，如下所示：

  var counter = document.querySelector('custom-counter');
  var i = 1;
  var completedAt = 10;

  var interval = setInterval(() => {
    counter.setAttribute('count', i);
    if (i == completedAt) {
      clearInterval(interval);
    }
    i++;
}, 1000);

它工作正常，“count”属性正在更改并显示在html中

现在，问题是我需要在单击“停止”按钮时停止计数器，正如您所见，我在connectedCallback（）中添加了一个click侦听器，该侦听器将this.enableCount的值设置为false

尽管在attributeChangedCallback（）中更新html之前有一个if语句来检查这个。enableCount

attributeChangedCallback（名称、旧值、新值）{
如果（this.enableCount）{/您有
这个问题

在匿名单击处理程序函数中

this.shadowRoot.querySelector('#stop').addEventListener('click', function() {
  this.enableCount = false;
})

此
不是您的网络组件，而是正在单击的按钮。您可以通过三种方式修复此问题：

a） 使用本身没有
此
的箭头函数：

this.shadowRoot.querySelector('#stop').addEventListener('click', () => {
  this.enableCount = false;
})

b） 使用
function.prototype.bind（）
，明确说明处理程序函数中的
应该是什么：

c） 使用闭包并定义一个范围正确的变量，该变量包含对该
的引用：

const self = this;
this.shadowRoot.querySelector('#stop').addEventListener('click', function() {
  self.enableCount = false;
})

谢谢，“这”指的是被点击的按钮。
this.shadowRoot.querySelector('#stop').addEventListener('click', () => {
  this.enableCount = false;
})

this.shadowRoot.querySelector('#stop').addEventListener('click', function() {
  this.enableCount = false;
}.bind(this))

const self = this;
this.shadowRoot.querySelector('#stop').addEventListener('click', function() {
  self.enableCount = false;
})