Не удается найти переменную в простой функции внутри цикла for (сафари)

Question

Я пытаюсь выяснить, почему Safari возвращает ошибку консоли, тогда как в других браузерах, таких как Chrome, проблем нет. Внутри цикла for есть простая функция:

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>

Codepen: https://codepen.io/ns91/pen/oNNEKpP

Откройте указанный выше URL кодеина в Safari и откройте консоль JavaScript. Как вы можете видеть, в Safari функция logLink();, похоже, не регистрирует переменную ссылки, хотя она работает в Chrome.

Я получаю следующую ошибку: ReferenceError: Невозможно найти переменную: link

Кто-нибудь знает, почему это происходит и как это исправить?

Спасибо за любую помощь.

Answer 1

Объявления функций относятся к функции, в которой они объявлены, и подняты (так что вне блока for), но объявления const ограничены содержащим блоком .

link существует только внутри блока, logLink живет вне его, поэтому logLink не имеет доступа к константе link.

Используйте выражение функции иconst, поэтому функция ограничена блоком цикла for, как константа link.

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>