通过动态变量更新方法无效

Question

我有以下方法，它在类init(即new car().filter(d => d.Color == "Red")(上非常有效：

filter = (event) => {
this.filter = event
return this
}

我试图通过用户更改下拉列表来动态更新它：

let colorDropdown = document.getElementById('colorDropdown');
colorDropdown.onchange = () => {
let color = colorDropdown.value; 
this.filter = d => d.Color == ""+color+"";
}

说用户选择"；橙色"；，如果我控制台单独记录上述内容，我会得到

console.log(color) = `Orange`
console.log(this.filter) = `d => d.Color == ""+color+""`

我的问题源于颜色在"；this.filter＝"；我代码的一部分。也许我想错了？有什么建议吗？

Answer 1

当您的箭头函数到达时，color的值将被捕获并存储为箭头函数的一部分。事实上，当你console.log()一个箭头函数时，它就是这样显示的。您的color变量实际上将在执行this.filter时定义。

您使用的概念被称为"；闭合"；。有关更多详细信息，请参阅MDN文档中的JavaScript闭包。

你提供的代码应该按原样工作。如果有错误，很可能是你问题中没有包含的代码中的错误。