如何访问箭头函数内的输入字段的值？ [复制]

Question

我最近正在制作一个 Javascript 颜色转换器（Up for Code Review），其中有两个函数在输入更改时调用（change 事件）。所以为了实现这一点，我有这样的代码：

hexInput.addEventListener("change", function() {
    if (isValidColor(this.value)) {
        // Conversion code
    }  
});

rgbInput.addEventListener("change", function() {
    if (isValidColor(this.value)) {
        // Conversion code
    } 
});

现在跟随airbnb style guide，我意识到也许我可以使用箭头函数来重新表述这两个绑定，因为它们使用的是匿名函数。所以我将代码更改为：

hexInput.addEventListener("change", () => {
    if (isValidColor(this.value)) {
        // Conversion code
    }  
});

rgbInput.addEventListener("change", () => {
    if (isValidColor(this.value)) {
        // Conversion code
    } 
});

但是，现在当我更改输入值时，什么也没有发生。所以为了尝试找出这个问题的原因，我决定打开 chrome JS 调试器，并在这些调用中添加一些断点。当我单步执行代码时，我发现了错误的根源：this.value 未定义！所以我决定用谷歌搜索这个问题并找到this question，它的答案指出“[a]rrow 函数没有 this 或 [sic] 他们自己”（链接的副本那个问题的人说箭头函数不仅仅是常规函数的较短语法）。所以现在我不知道用什么替换this.value。

这引出了我的问题：如何在不使用this.value 的情况下访问箭头函数内的输入字段的值？（请记住，我是非常 em> JS 新手）

这是一个代码sn-p，说明了我上面提到的问题：

(function() {
    window.onload = function() {
        document.getElementById("test").addEventListener("change", () => {
            console.log(this.value);
        });
    }
}());

<input id="test" type="text" />

Answer 1

没有上下文，你需要范围：

hexInput.addEventListener("change", function() {
   if (isValidColor(hexInput.value)) {
      rgbInput.value = convertHexToRGB(hexInput.value);
      document.body.style.backgroundColor = rgbInput.value;
   }  
});

但是我更喜欢好的代码而不是好看的代码，所以请忽略这里的样式指南 :)

---

现在是代码审查部分：您可以将整个逻辑提取到更通用的函数中，例如：

function fromToConverter(from, to, converter){ 
  from.addEventListener("change", function() {
     if (isValidColor(from.value)) {
        to.value = converter(from.value);
      }  
   });
}

所以你可以这样做：

fromToConverter(hexInput, rgbInput, convertHexToRGB);
fromToConverter(rgbInput, hexInput, convertRGBToHex);

Answer 2

使用可用的事件参数event.target.value:

(function() {
    window.onload = function() {
        document.getElementById("test").addEventListener("change", (e) => {
            console.log(e.target.value);
        });
    }
}());

<input id="test" type="text" />