在第一行代码中声明所有 javascript 变量的标准？

Question

我们正在与一家新公司合作，他们有一个编码标准，他们在方法的第一行立即声明方法中使用的所有 Javascript 变量。

我问他们这样做是否有原因，并只是被告知这是他们的编码标准，所以我用谷歌搜索，显然这确实是一些网站推荐的标准。

我的第一个想法是，如果一个方法太大，以至于您实际上发现将所有变量放在顶部很有帮助，那么您的方法太大并且需要分解。

所以我的问题是，在顶部声明变量而不是在第一次使用变量时声明它们的目的是什么？它只是一个编码标准，旨在帮助那些编写（在我个人看来）我认为太长的方法的人，还是还有其他我忽略的好处？

Answer 1

它曾经是一种使代码更清晰的方法，当时我们只有var，它被提升了。例如，以下是您现在仍然会看到的一个非常常见的错误：

for (var i = 0; i < arr.length; i++) {
  arr[i].addEventListener('click', function() {
    console.log(i);
  });
}

如果一种编码风格或 linter 要求将var i提取出循环并在函数顶部声明，则更清楚的是，只有一个绑定i，并且在循环结束时，i === arr.length，可能会提示编码器在运行之前修复逻辑错误：

var i = 0;
for (; i < arr.length; i++) {
  arr[i].addEventListener('click', function() {
    console.log(i);
  });
}

但现在我们有了const和let，它们没有被提升到循环之外（它们具有块作用域，而不是函数作用域），手动将变量声明提升到函数顶部的效用要小得多。

有些人可能会认为，如果人们认为手动将变量提升到其作用域的顶部会使事情变得更糟（变量不能重新分配；变量可以，使程序员在阅读代码时更容易内化变量）。例如，假设变量依赖于其他变量的值：重构以下内容constletconstletconst

var startingNum, numMultipliedByTwo, plusOne;
startingNum = 2;
numMultipliedByTwo = startingNum * 2;
plusOne = numMultipliedByTwo + 1;

到 ES6+，使用手动提升，只能通过以下方式完成let：

let startingNum, numMultipliedByTwo, plusOne;
startingNum = 2;
numMultipliedByTwo = startingNum * 2;
plusOne = numMultipliedByTwo + 1;

但由于let不存在与 相同的提升问题var，并且因为const比 更可取let，所以人们很可能会得出这样的结论：这种样式不会提供任何好处，而是使用：

const startingNum = 2;
const numMultipliedByTwo = startingNum * 2;
const plusOne = numMultipliedByTwo + 1;