javascript - 为什么单个 var 在 javascript 中很好用？

Question

谁能告诉我为什么对多个变量使用一个 var 声明并在换行符上声明每个变量认为是一种好的编程行为？

// bad
var items = getItems();
var goSportsTeam = true;
var dragonball = 'z';

// good
var items = getItems(),
    goSportsTeam = true,
    dragonball = 'z';

Answer 1

它不被认为是“好”或“坏”。这是一个偏好问题。

构建代码质量工具 JSLint 的人 Douglas Crockford 喜欢它。

它可能具有的一个“优势”是它避免了可变提升的可能性。在 JavaScript 中，所有var声明都会自动移到其作用域的顶部。

这就是 Crockford 认为第二种选择更好的原因：

在具有块范围的语言中，通常建议在第一次使用的地方声明变量。但是因为 JavaScript 没有块作用域，所以在函数顶部声明函数的所有变量更为明智。建议每个函数使用单个 var 语句。这可以使用 vars 选项来拒绝。

Answer 2

这是一种偏好，我不会说好或坏。是的，JSLint 抱怨它，我真的不喜欢它抱怨for循环变量也是内联的。将其放入 JSLint 的原因是为了防止可能的提升混淆。

此外，在某些情况下，在顶部声明所有变量会导致文件稍小。考虑以下：

var a = 10;
a++;
var b = 20;

在 Google Closure 运行之后

var a=10;a++;var b=20;

与此相反，如果我们将b' 声明拉到顶部。

var a=10,b;a++;b=20;

Answer 3

主要的好处（除了风格偏好，我猜）是它可以防止你编写遭受意外变量提升后果的代码。

举个例子：

var foo = function(){alert('foo');}
function bar(){
  foo();
  var foo = function(){alert('foobar')};
  foo();
}
bar();

通过阅读这段代码，的意图bar似乎如下：

1. 调用外部foo函数来提醒字符串'foo'。
2. 创建一个局部变量，foo.
3. 调用本地foo函数来提醒字符串'foobar'。

实际上，发生的事情是这样的：

1. 局部变量foo被提升到bar函数的顶部。
2. foo现在实际上是指局部变量而不是同名的外部变量。但是由于尚未分配本地，因此其值未定义。因此，当你尝试调用时foo，你会得到一个 TypeError。
3. 没有。因为你抛出了一个错误。就是这样。你的代码坏了。

Answer 4

支持 Crockfords 偏好的论点已经充分提出并且是有效的。然而，我现在才刚刚开始回到第一种格式，因为我相信对于了解变量提升并且不太可能犯规的有经验的开发人员来说，我能想到两个优点：

1. 当新变量添加到定义列表中时，比较变得更容易。这意味着您在分析差异时可能会遇到更少的合并冲突（尽管它们可能要解决但很简单）和更少的认知负担。出于类似的原因，我也被转换为悬空逗号，这是我从没想过的 xD

2. 正如@ldsenow 所指出的，它可以使搜索变量定义更加简单。您将始终能够搜索var <name>并获得您想要的结果，除此之外别无其他。