通过分析这段代码的进化历程，或许能够加深您对JavaScript的作用域的理解

goji 发布于2019-08-19 18:13 / 2982人阅读

摘要：前言这里我们不讨论作用域链的问题，这些问题您可以看下我之前写的东西，通过这一段代码，让我们重新认识。这回我们主要来分享一下，中作用域的创建方式。立即执行函数是个不错的选择，但具名的立即执行函数可以让代码本身更具有可读性，是个最佳实践。

前言

这里我们不讨论作用域链的问题，这些问题您可以看下我之前写的东西，通过这一段代码，让我们重新认识JavaScript。
这回我们主要来分享一下，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元，强力推荐

网站

在线es6编辑器，https://babeljs.io/repl/

云服务器 GPU云服务器 javascript的作用或许文档的数据 jsp获取作用域的值数据分析的作用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79341.html

理解JavaScript的核心知识点：作用域

摘要：也毫不例外，但在中作用域的特性与其他高级语言稍有不同，这是很多学习者久久难以理清的一个核心知识点。主要使用的是函数作用域。关于作用域：About Scope 作用域是程序设计里的基础特性，是作用域使得程序运行时可以使用变量存储值、记录和改变程序的状态。JavaScript 也毫不例外，但在 JavaScript 中作用域的特性与其他高级语言稍有不同，这是很多学习者久久难以理清的一个核...

HelKyle 2019-08-26 13:31 评论0 收藏0
javascript作用域和闭包之我见

摘要：查询是在作用域链中，一级级的往上查找该变量的引用。作用域和作用域链作用域的概念，应该两张图几句话就能解释吧。这个建筑代表程序中的嵌套作用域链。一层嵌一层的作用域形成了作用域链，变量在作用域链中的函数内得到了自己的定义。 javascript作用域和闭包之我见看了《你不知道的JavaScript(上卷)》的第一部分——作用域和闭包，感受颇深，遂写一篇读书笔记加深印象。路过的大牛欢迎指点...

SoapEye 2019-08-20 14:51 评论0 收藏0
javascript 闭包 ---- js进化之路

摘要：闭包利用的，其实就是作用域嵌套情况下，内部作用域可以访问外部作用域这一特性。之所以要将闭包和垃圾回收策略联系在一起，是因为这涉及到闭包的一些重要特性，如变量暂时存储和内存泄漏。因为匿名函数回调的闭包实际引用的是变量，而非变量的值。本文旨在总结在js学习过程中，对闭包的思考，理解，以及一些反思，如有不足，还请大家指教闭包---closure 闭包是js中比较特殊的一个概念，其特殊之处...

HtmlCssJs 2019-08-21 18:46 评论0 收藏0
你应该要知道的作用域和闭包

摘要：写在前面对于一个前端开发者，应该没有不知道作用域的。欺骗词法作用域有两个机制可以欺骗词法作用域和。关于你不知道的的第一部分作用域和闭包已经结束了，但是，更新不会就此止住未完待续这是《你不知道的JavaScript》的第一部分。本系列持续更新中，Github 地址请查阅这里。写在前面对于一个前端开发者，应该没有不知道作用域的。它是一个既简单有复杂的概念，简单到每行代码都有它的影子...

JouyPub 2019-08-22 17:02 评论0 收藏0
闭包有话说

摘要：请用一句话描述什么是闭包，并写出代码进行说明。闭包的使用场景使用闭包可以在中模拟块级作用域闭包可以用于在对象中创建私有变量。引言刚学习前端的时候，看到闭包这个词，总是一脸懵逼，面试的时候，问到这个问题，也是回答的含含糊糊，总感觉有层隔膜，觉得这个概念很神奇，如果能掌握，必将功力大涨。其实，闭包没有这么神秘，它无处不在。一个简短的的问题首先，来看一个问题。请用一句话描述什么是闭...

techstay 2019-08-20 14:08 评论0 收藏0