前言
这里我们不讨论作用域链的问题,这些问题您可以看下我之前写的东西,。
这回我们主要来分享一下,JavaScript中作用域的创建方式。代码
通过理解代码来记住知识点是最快的,面试官问道类似的问题的时候,举个代码的例子就大家都懂了,胜过任何含糊的概念描述,所以我们来看一下这个代码的例子吧。
rank-01
请思考输出结果,for循环的{}能创建一个作用域吗?
for (var i = 0; i < 2; i++) { console.log("in for:"+i);}console.log("out for:"+i);
rank-02
请思考代码运行结果,function应该能创建作用域吧?
function forscope(){ for (var i = 0; i < 2; i++) { console.log("in for:"+i); }};forscope();console.log("out for:"+i);
rank-03
为什么这样写会更好呢?
(function(){ for (var i = 0; i < 2; i++) { console.log("in for:"+i); }})();console.log("out for:"+i);
rank-04-a
老外说,这样子写才是最佳实践,您看出来门道了吗?
(function forscope(){ for (var i = 0; i < 2; i++) { console.log("in for:"+i); }})();console.log("out for:"+i);
rank-04-b
这样写太鬼了吧?
try{ undefined();}catch(i){ for (i = 0; i < 2; i++) { console.log("in for:"+i); }}console.log("out for:"+i);
rank-es6-01
现在能体会到es6中let存在的意义了吧?
for (let i = 0; i < 2; i++) { console.log("in for:"+i);}console.log("out for:"+i);
rank-es6-02
据说这才是最佳实践!
{ let i; for (i = 0; i < 2; i++) { console.log("in for:"+i); }}console.log("out for:"+i);
总结
function,try catch均可以创建作用域,可以使用它们来更好地保护代码细节,一般还是用function,try catch一般是代码转换器会用的。
立即执行函数(function(){...})();是个不错的选择,但具名的立即执行函数可以让代码本身更具有可读性,是个最佳实践(function forscope(){...})();。
es6中let可以隐式地和最近的{}一起创建一个作用域,但显示地创建能够方便之后代码块的移动,是个最佳实践。
其他
参考书
《你不知道的JavaScript(上卷)》第一部分,亚马逊电子书9.9元,强力推荐
网站