【翻译】JavaScript中的作用域

参考

• 原文链接 - 英文原文
• QQ群 - Javascript高级爬虫 - 作者自建群，欢迎加入！
• awesome-java-crawler - 作者收集的爬虫相关工具和资料
• 一个帮你自动创建阿里云抢占式实例并开启网络加速的脚本 - 自动创建阿里云抢占式节点

什么是作用域？

作用域是运行时在代码某些特定部分中变量，函数或对象的可访问性。

当最小权限原则应用于编程语言设计时，它们就诞生了。

为什么我们要学习呢？

它们为您的代码提供了一定程度的安全性，即仅在确实需要它们时使用。

对代码的各个部分进行作用域界定有助于提高效率，跟踪并减少错误。

当您拥有名称相同但作用域不同的变量时，它还解决了命名问题，因此减少了名称空间冲突。

作用域的类型是什么？

1. 全局和本地
2. 词法
3. 块
4. 公共和私有

让我们逐个示例地查看它们。

全局作用域和本地作用域

在函数外部声明的任何变量都属于全局作用域，因此可以访问，并且可以在代码中的任何位置进行更改。

函数内部定义的变量在本地作用域内。对于该函数的每次调用，它们具有不同的作用域。这意味着具有相同名称的变量可以在不同的函数中使用。这是因为这些变量绑定到各自的函数，每个函数具有不同的作用域，并且在其他函数中不可访问。

新函数 = 新本地作用域 —— 这是规则。

全局和本地作用域

词法作用域

当一个函数在另一个函数中时，内部函数可以访问外部函数中的作用域，这称为“词法作用域”，也称为“静态作用域”，因为它只能在其所被定义的代码块中被_调用_（引用）。

词法作用域

JavaScript从最内层的作用域开始并向外搜索，直到找到所要查找的变量/对象/函数。

要记住的重要一点是，词法作用域，并没有反向作用。也就是说，在上面的示例中，我们无法访问SocialMedia函数和Platform函数中的comment变量。

块作用域

块语句——例如if和switch条件结构或for和while循环结构以及{}——与函数不同，不会创建新的作用域。在块语句中定义的变量将保留在它们已经存在的作用域内。

块作用域

让我们看看关于它的一个面试题（混合了执行上下文，闭包和作用域知识）

for (var i = 0; i < 3; i++) {   
  setTimeout(function () { console.log(i); }, 1000 + i);   
}

上面将输出3、3、3因为每次都是同一个变量被赋值。

在第一次迭代中，将console.log(i)添加到堆栈中，事件循环检测到它有延迟，将其发送到事件队列，这又发生了两次，最后当事件循环开始一个接一个地读取它们并输出时，由于最后的i++，变量i的最终值为3，并且由于变量的作用域相同，因此每次提取的值都是3。

但是，ECMAScript 6引入了letand const关键字。可以使用这些关键字代替var关键字，并且letand const关键字支持在块语句中声明局部作用域。

如果我们将var i更改为let i，现在让我们看看其中的区别。

for (let i = 0; i <3; i++) {   
  setTimeout(function () { console.log(i); }, 1000 + i);   
}

上面将输出0,1,2因为每次都为变量创建了新的作用域。

公共和私有作用域

把公共（全局）作用域的函数包装起来可以使它们更健壮免受攻击。但是在JavaScript语言中，没有公共或私有作用域修饰符。不过，我们可以模拟它们。

(function () {      
 var test = function () {   
   //在这里做一些事情  
 };   
})();   
//函数末尾的括号告诉解释器在读取它而无需调用的情况下立即执行它。
test(); // Uncaught ReferenceError

也可以使用称为模块模式的设计模式来创建此机制。

JavaScript中的私有和公共作用域

modulePattern的return语句包含我们的公共函数。私有函数就是那些不返回的函数。不返回函数会使它们在modulePattern命名空间之外不可访问。但是，我们的公共函数仍然可以访问相同作用域的私有函数，这使它们可以方便地使用辅助函数。

---

如果您想将其添加到我的电子邮件列表中，请考虑在此处输入您的电子邮件，并在媒体上关注我，以阅读有关javascript和github的更多文章，以查看我疯狂的代码。

我的比特币地址：132Ndcy1ZHs6DU4pV3q2X1GzSCdBEXX6pz

我的以太坊地址：0xc46204dfc8449Ffb0f02a9e1aD81F30D3f027010

---

您可能也喜欢我的其他文章

1. Javascript执行上下文和提升
2. Javascript —生成器/下一步和异步等待A
3. 了解Javascript'this'关键字（上下文）。
4. 具有map，reduce，filter的Javascript数据结构
5. Javascript-Currying VS部分应用程序
6. Javascript ES6 —可迭代器和迭代器
7. Javascript性能测试-针对每个vs（映射，缩小，过滤，查找）。
8. Javascript-代理
9. Javascript —作用域
10. 使用Tensorflow-js进行图像对象检测
11. Nodejs应用程序结构—构建高度可扩展的体系结构。
12. Node.js 10.0.0，作为后端开发人员/安全热心者会期望什么？
13. 图像处理—在React.js中制作自定义图像过滤器
14. Google印度面试问题