javascript - 函数和主 dom 中的变量是否重新声明？

Question

如果我声明了一个变量，在函数中使用它时是否需要重新声明它，例如:

let libraryForm = document.getElementById('libraryForm');
display.prototype.clear = function () {
  let libraryForm = document.getElementById('libraryForm');
  libraryForm.reset();
}

我必须这样做还是这个函数是正确的:

let libraryForm = document.getElementById('libraryForm');
display.prototype.clear = function () {
  libraryForm.reset();
}

Answer 1

这要看情况。如果外部行运行时该元素存在，并且该元素将始终保留在 DOM 中，那么您可以保存对该变量的引用并在函数中使用它，就像在较低的代码中一样。

通常这是可以实现的，并且可能是更好的选择，但并不总是可行。有时，您必须选择函数内的元素。例如，如果该元素被另一个具有相同 ID 的元素替换，则您必须重新选择它。以下是未能重新选择元素将导致错误的示例:

const libraryForm = document.getElementById('libraryForm');
const clear = function() {
  libraryForm.reset();
};

// If something corrupts the container, then the element stored in the variable above
// will no longer be in the DOM
container.innerHTML += '';

// and the following line will fail:
clear();

// oops... the form we reset isn't in the DOM anymore
console.log(libraryForm.isConnected);

<div id="container">
  <form id="libraryForm">
  </form>
</div>

如果外行运行时函数内的元素不存在，您还必须选择该元素，例如:

<script>
const libraryForm = document.getElementById('libraryForm');
const clear = function() {
  libraryForm.reset();
};

setTimeout(clear, 2000);
</script>
<div id="container">
  <form id="libraryForm">
  </form>
</div>

(尽管在上述情况下，最好将 script 放在单独的文件中并使用 defer 属性，或者将所有内容包装在 DOMContentLoaded 监听器中)