译者按: 使用let
的确会比var
安全很多。
原文: Why You Shouldn’t Use ‘var’ Anymore
译者: Fundebug
为了保证可读性,本文采用意译而非直译。
我已经使用ES2015(ES6)的语法编写JavaScript程序很久了,并且喜欢上它提供的新特性带来的优雅和简洁。我最习惯的就是不再使用var
,而是let/const
。我想当然的以为let
仅仅是var
的替代者,而事实上let
还为我们提供了更加精细的作用域。
我大多数时候使用的变量都是用const
来声明,因为如果尝试对使用const
声明的变量进行修改,将会报错。这可以避免不小心将一个不该修改的常量值修改。但是,我们还是需要可以声明可以被修改的变量,比如在循环里面的计数器,我们需要不断地对改变了加1。可是为什么我们使用let
而不是var
呢?
最简单的答案就是let
提供块作用域(block-scoping),这会比var
提供的以函数为作用域有更加精细化的控制。为了便于理解,我来用一个经典的前端工程师面试的问题来描述两者的区别。
问题: 在下面的例子中,请说出控制台的打印结果。
var callbacks = [];
(function() {
for (var i = 0; i < 5; i++) {
callbacks.push( function() { return i; } );
}
})();
console.log(callbacks.map( function(cb) { return cb(); } ));
|
我们将for循环执行五次,每次将一个函数push到callbacks
数组中。最后callbacks
数组里面的每一个函数的执行结果打印出来。
一个新手工程师经过深思熟虑可能会回答[0, 1 , 2, 3, 4]
, 然而却掉入了JavaScript
的”hoisting陷阱”。
只有当你理解了hoisting, 才能给出正确的答案[5, 5, 5, 5, 5]
。
var callbacks = [];
(function() {
var i;
for (i = 0; i < 5; i++) {
callbacks.push( function() { return i; } );
}
})();
console.log(callbacks.map( function(cb) { return cb(); } ));
|
注意上面的代码,JavaScript
将变量提升到函数定义的顶部,经过整个for
循环,callbacks
里面存储的5个函数指向的同一个变量i
的值已经是5。所以最终打印出来的值都为5。
在以前要通过各种奇淫技巧来解决这个问题,并成功返回[0, 1, 2, 3, 4]
, 现在我们有了let
,就可以很简单解决问题:
var callbacks = [];
(function() {
for (let i = 0; i < 5; i++) {
callbacks.push( function() { return i; } );
}
})();
console.log(callbacks.map( function(cb) { return cb(); } ));
|
因为let
拥有块作用域,所以使用let
声明的变量i
不会被提升到函数顶部,i
的作用域在for
循环, 就会每次循环有独立的值。
那我们是不是应该不要使用var
了呢?如果你想要一个变量拥有函数作用域,var
还是很有用的。
读者提到的两个问题:
-
const
声明的变量不是完全不可更改。比如:const myNotQuiteImmutableObject = {thisCanBeChanged: "not immutable"};myNotQuiteImmutableObject.thisCanBeChanged = "see I changed it.";但是,使用
const
声明可以阻止一些基本的更改,比如:const immutableString = "you can't change me";immutableString = "D'OH!"; // error如果你想要完全的不可更改,可以使用Facebook提供的Immutable库。
老版本的浏览器不支持
let
。不仅如此,而且有些最新的浏览器也还没有支持let
。我们可以使用Babel
来避免这个问题,Babel
允许你使用所有最新的JavaScript功能,然后将其翻译到甚至IE8都能支持的代码。
关于Fundebug
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了7亿+错误事件,得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用!
版权声明:
转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/05/04/why-you-should-not-use-var/