时间戳

首页 > 解决方案 > 在 foreach 循环中转换为箭头函数会导致 TypeError

javascript - 在 foreach 循环中转换为箭头函数会导致 TypeError

问题描述

我有这个代码块，用于将事件侦听器绑定到每个带有#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',
    });
  });
});

或者：

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

标签： javascript

解决方案

问题是因为this在你的函数里面使用。

根据MDN：

箭头函数表达式是正则函数表达式的语法紧凑替代方案，尽管它没有绑定到 this、arguments、super 或 new.target 关键字。

正如@Ben Aston 在评论中已经提到的，您可以更改this.getAttribute为event.target.getAttribute

推荐阅读