Javascript 在foreach循环中转换为arrow函数会导致TypeError

我有这个代码块，我用它将事件侦听器绑定到每个带有

#

href的锚标记。我决定将事件侦听器的回调函数转换为箭头函数，但当原始代码运行时，修改后的代码会导致错误：

TypeError:undefined没有属性

。我以前多次使用过arrow回调函数，它们工作得很好。是什么让它在这种情况下破裂

工作的原始代码：

document.querySelectorAll（'a[href^=“#“]”）。forEach（（锚定）=>{
anchor.addEventListener（'click'，函数（e）{
e、 预防默认值（）；
document.querySelector（this.getAttribute（'href'））.scrollIntoView({
行为：“平滑”，
});
});
});

断箭头回调函数：

document.querySelectorAll（'a[href^=“#“]”）。forEach（（锚定）=>{
anchor.addEventListener（'click'，（e）=>{
e、 预防默认值（）；
document.querySelector（this.getAttribute（'href'））.scrollIntoView({
行为：“平滑”，
});
});
});

编辑：我修复了这样的问题，但我仍然无法弄清楚这两者有何不同

document.querySelectorAll（'a[href^=“#“]”）。forEach（（锚定）=>{
anchor.addEventListener（'click'，（e）=>{
e、 预防默认值（）；
anchor.scrollIntoView({
行为：“平滑”，
});
});
});

或：

document.querySelectorAll（'a[href^=“#“]”）。forEach（（锚定）=>{
anchor.addEventListener（'click'，（e）=>{
e、 预防默认值（）；
e、 target.scrollIntoView({
行为：“平滑”，
});
});
});

问题是因为在函数中使用了

此

根据：

arrow函数表达式是一种语法紧凑的替代方法 正则函数表达式，尽管没有自己的绑定 this、arguments、super或new.target关键字

---

正如@Ben Aston在评论中已经提到的，您可以将

this.getAttribute

更改为

event.target.getAttribute

将

this.getAttribute

更改为

event.target.getAttribute

。可能吧。啊，我不知道这个。看来我需要深入研究这门学科。非常感谢。我很高兴帮助你。我知道这场斗争，javascript有很多这样的陷阱。