foreach循环内向箭头函数的转换会导致TypeError

Question

我有此代码块，可用于将事件监听器绑定到具有# href的每个锚标记。我决定将事件侦听器的回调函数转换为箭头函数，但是当原始代码工作时，修改后的代码会导致错误：TypeError: undefined has no properties。我之前已经使用箭头回调函数很多次了，并且可以正常工作。是什么让它在这种情况下中断？

有效的原始代码：

document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth',
    });
  });
});

断箭头回调函数：

document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
  anchor.addEventListener('click', (e) => {
    e.preventDefault();
    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth',
    });
  });
});

编辑：我已经解决了这样的问题，但是我仍然无法弄清这两者有何不同

document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
  anchor.addEventListener('click', (e) => {
    e.preventDefault();
    anchor.scrollIntoView({
      behavior: 'smooth',
    });
  });
});

Answer 1

问题是因为在函数内部使用了this。

msd

箭头函数表达式在语法上紧凑正则函数表达式，尽管没有自己的绑定this，arguments，super或new.target关键字。箭头功能表达式不适合用作方法，因此不能用作构造函数。