面向对象 面向过程的区别 学好js，这些js函数概念一定要知道【推荐】(3)

到目前为止，一切都很顺利。现在你想添加测量保龄球速度的功能，所以你在回调函数内部添加了一个简单的if语句。

哦，亲爱的，之前那段“使用了变量t的代码”运行良好，现在你无意中添加了第二个变量t，这里的t指向的是一个新的内部变量t而不是原来的外部变量。

JavaScript中var声明的作用域像是Photoshop中的油漆桶工具，从声明处开始向前后两个方向扩散，直到触及函数边界才停止扩散。你想啊，这种变量t的作用域甚广，所以一进入函数就要马上将它创建出来。这就是所谓的提升（hoisting）。变量提升就好比是，JS引擎用一个很小的代码起重机将所有var声明和function函数声明都举起到函数内的最高处。

现在看来，提升特性自有它的优点。如果没有提升的动作，许多在全局作用域范围内看似合理的完美技术在立即调用函数表达式（ IIFE ）中通通失效。但在上面演示的这种情况下，提升会引发令人不愉快的bug：所有使用变量t进行的计算最终的结果都是NaN。这种问题极难定位，尤其是当你的代码量远超上面这个玩具一般的示例，你会发狂到崩溃。

在原有代码块之前添加新的代码块会导致诡异的错误，这时候我就会想，到底是谁的问题，我的还是系统的？我们可不希望自己搞砸了系统。

而这个问题与接下来这个问题相比就相形见绌了。

问题 #2：循环内变量过度共享

你可以猜一下当执行以下这段代码时会发生什么，非常简单：

如果你一直跟随这个专栏的文章，你知道我喜欢在示例代码中使用alert()方法。可能你也知道alert()不是一个好的API，它是一个同步方法，所以当弹出一个警告对话框时，输入事件不会触发，你的JS代码，包括你的整个UI，直到用户点击OK确认之前完全处于暂停状态。

请不要轻易使用alert()来实现Web页面中的功能，我之所以在代码中使用是因为alert()特性使它变成一个非常有教学意义的工具。

而且，如果放弃所有笨重的方法和糟糕的行为就可以做出一只会说话的猫，何乐而不为呢？

然而一定是哪里不对，这只会说话的猫并没有按照预期连说三条消息，它说了三次“undefined”。

你知道问题出在哪里么？

事实上，这个问题的答案是，循环本身及三次timeout回调均共享唯一的变量i。当循环结束执行时，i的值为3（因为messages.length的值为3），此时回调尚未被触发。

所以当第一个timeout执行时，调用cat.say(messages[i]) ，此时i的值为3，所以猫咪最终打印出来的是messages[3]的值亦即undefined。

解决这个问题有很多种方法（ 这里有一种 ），但是你想，var作用域规则接连给你添麻烦，如果能在第一时间彻底解决掉这个问题多好啊！

let是更完美的var

JavaScript的设计错误（其它语言也有，奈何JavaScript太突出）多半不能被修复。保持向后兼容性意味着永不改变JS代码在Web平台上的行为，即使连标准委员会都无权要求修复JavaScript中自动插入分号这种怪异的特性；浏览器厂商也从来不会做出突破性的改变，因为如此一来伤害的是他们的忠实用户。

所以大约十年以前，Brendan Eich决定修复这个问题，但只有唯一的解决方案。

他添加了一个新的关键词：let。let与var一样，也可以用来声明变量，但它有着更好的作用域规则。

它看起来是这样的：

或者这样的：

let与var还是有不同之处的，所以如果你只是在代码中将var全局搜索替换为let，一些依赖var声明的独特特性（可能你不是故意这样写）的代码可能无法正常运行。但对于绝大多数代码来说，在ES6的新代码模式下，你应该停止使用var声明变量，能使用let就用吧！从现在起，请记住这句口号：“let是更完美的var”。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-85542-3.html