javascript - 无法在 for of 循环内的简单函数中找到变量(safari)

Question

我试图找出为什么 Safari 会返回控制台错误，而其他浏览器(如 Chrome)则没有问题。在 for of 循环中有一个简单的函数，如下所示:

const links = document.querySelectorAll('ul > li > a');

console.log(links); // successful

for (const link of links) {
    console.log(link); // successful
  
  function logLink() {
    console.log(link);
  }
  
  logLink();
}

<ul id='test'>
  <li>
    <a class='one' href='#'>test 1</a>
  </li>
  <li>
    <a class='two' href='#'>test 2</a>
  </li>
  <li>
    <a class='three' href='#'>test 3</a>
  </li>
</ul>

代码笔:https://codepen.io/ns91/pen/oNNEKpP

在 safari 中打开上面的可待因 URL 并打开你的 javascript 控制台。如您所见，在 Safari 中，函数 logLink(); 似乎没有记录链接变量，尽管它在 Chrome 中有效。

我得到的错误是:ReferenceError:找不到变量:链接

有谁知道为什么会发生这种情况，以及如何解决它？

在此感谢您的帮助。

Answer 1

函数声明的作用域是它们在内部声明并提升的函数(因此它在 for 循环 block 的外部)但是 const 声明的作用域是包含 阻止。

link 仅存在于 block 内，logLink 位于 block 外，因此 logLink 无法访问 link常量。

使用一个函数表达式和一个const，这样函数就像link常量一样被限制在for循环的 block 中。

const links = document.querySelectorAll('ul > li > a');
for (const link of links) {
  const logLink = function logLink() {
    console.log(link);
  }
  logLink();
}

<ul id='test'>
  <li>
    <a class='one' href='#'>test 1</a>
  </li>
  <li>
    <a class='two' href='#'>test 2</a>
  </li>
  <li>
    <a class='three' href='#'>test 3</a>
  </li>
</ul>