是否有可能在箭头函数中获取 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)
})

使用这样的变量会导致大量内存使用，因为您不断添加对最终应该被垃圾收集的事物的引用，所以要小心不要做太多。

并且总是有 getting/finding 选项来检查状态的正确元素。从长远来看，这可能会使用更少的资源运行，并且不会显着影响您的应用程序的速度。

即使您需要使用不同的上下文来检查 checkbox/radio 按钮的状态，您至少能够弄清楚上下文 "me" 是什么。

Is it possible to get the this inside an arrow function as well as the global this?