是否可以在箭头函数中获取this以及全局this？

Question

我有：

        checkbox.addEventListener('change', () => {
            console.log(this.checked)
        })

问题在于this.checked由于箭头功能而未定义。那么如何检查复选框的值呢？我知道我可以使用常规的function，但是我想将this保留在外部范围内，因为我会从中调用一些函数

Answer 1

破坏了箭头功能的作用。使用事件对象获取对被单击元素的引用。

checkbox.addEventListener('change', (event) => {
  console.log(event.target.checked)
})

并且您还将复选框定义为变量，以便可以使用

checkbox.addEventListener('change', (event) => {
  console.log(checkbox.checked)
})

Answer 2

在使用这种类型的作用域封装时，我之前做过的事情是使用变量保留“ this”供以后参考。

var me = this;
checkbox.addEventListener('change', () => {
    console.log(me.checked)
})

使用这样的变量可能会导致大量内存使用，因为您不断添加对最终应进行垃圾收集的内容的引用，因此请避免做太多事情。

并且总是可以选择获取/查找正确的元素来检查状态。从长远来看，这可能会使用较少的资源，并且不会显着影响应用的速度。

即使您需要使用其他上下文来检查复选框/单选按钮的状态，也至少能够弄清楚“我”是什么上下文。