Javascript 中的块作用域、函数作用域和局部作用域 [英] Block scope, function scope and local scope in Javascript

问题描述

1. 块作用域有时与函数作用域相同吗?我知道函数作用域适用于函数内的所有内容，但不知道块作用域究竟是什么.
2. 对于 Javascript，是否目前推荐使用 let/const 而不是 var 以便将来维护?(来自Airbnb 风格指南)

解决方案

我不确定你的问题是否真的得到解答:

<块引用>

块作用域有时与函数作用域相同吗?我知道函数作用域适用于函数内的所有内容，但不知道是什么正是一个块作用域.

是，块作用域有时与函数作用域相同.块作用域是一组大括号内的所有内容{ a block scope here }.因此，在函数代码的顶部，块作用域将与函数作用域相同:

函数测试(x) {//这既是块作用域又是函数作用域让 y = 5;如果 (x) {//这是一个较小的块作用域，与函数作用域不同让 z = 1;}}

<块引用>

对于Javascript，目前是否推荐使用let/const代替var 用于将来的维护?(这是来自 Airbnb 风格指南)

let 和 const 是最新 ES6 规范的一部分，仅在最新的 Javascript 引擎中实现，有时在最新的引擎中，它们仅通过特殊标志启用.它们将用于所有较新的 JS 引擎/浏览器，但尚未广泛部署.因此，如果您正在为整个互联网上的常规浏览器使用编写 Javascript，您还不能可靠地使用 let 和 const.

在某些情况下，您现在可以安全地使用 let 和 const 进行编程:

1. 如果您只针对特定的 Javascript 引擎，并且您知道它支持这些功能(例如特定版本的 nodejs 或仅适用于特定浏览器特定版本的插件).

2. 如果您使用的转译器会将您的代码转换为可在所有浏览器中运行的代码.使用转译器时，您可以使用最新功能编写代码，转译器会简化"，这样您的代码就可以通过模拟新功能在旧浏览器中运行.

如果您正在为知道支持 let 和 const 的环境进行编程，那么建议适当地使用它们.如果你在函数顶部声明一个变量，那么 let 和 var 会做同样的事情.

如果你在函数内声明一个较小作用域的变量，那么let将被包含在较小的作用域内，但var会被提升到函数的顶部function 并且将具有函数作用域，无论它在哪里声明.

<小时>

您链接到的 AirBnb 风格指南是专门为 ES6 环境编写的(注意有一个单独的其风格指南的 ES5 版本链接).所以，这意味着他们假设了一个支持 ES6 的环境.那要么是因为他们的目标是他们知道支持 ES6 的服务器端 JS 引擎，要么是因为他们使用的转译器将 ES6 代码转换为可在 ES5 引擎上运行的代码.

<小时>

关于转译器的说明.在使用转译器并将所有变量声明切换到块作用域内的 let 之前，值得了解转译器生成什么样的代码以及是否它生成的额外代码对应用程序的性能有任何影响.例如，let 的块作用域是通过创建内联 IIFE 来模拟的，这可能会导致每个包含 let 语句的块的额外运行时开销.我并不是说这一定是一件坏事，应该阻止您使用转译器，但是在决定是否使用转译器时，我建议您彻底熟悉转译后的代码对于各种 ES6 的样子功能，以便您了解它是适合您的任何工作还是仅适用于某些工作.

1. Is block scope sometimes the same as function scope? I know function scope is for everything inside a function, but don't get what exactly a block scope is.
2. For Javascript, is it currently recommended to use let / const instead of var for future maintenance? (This was from Airbnb Style Guide)

解决方案

I'm not sure you really got your questions answered yet:

Is block scope sometimes the same as function scope? I know function scope is for everything inside a function, but don't get what exactly a block scope is.

Yes, a block scope is sometimes the same as a function scope. Block scope is everything inside a set of braces { a block scope here }. So, at the top of a function's code, a block scope will be the same as a function scope:

function test(x) {
   // this is both a block scope and a function scope
   let y = 5;
   if (x) {
       // this is a smaller block scope that is not the same as the function scope
       let z = 1;
   }
}

For Javascript, is it currently recommended to use let / const instead of var for future maintenance? (This was from Airbnb Style Guide)

let and const are part of the newest ES6 specification and are only implemented in the latest Javascript engines and sometimes in the latest engines they are only enabled with special flags. They are coming to all newer JS engines/browsers, but are not widely deployed yet. Thus, if you are writing Javascript for regular browser consumption across the broad internet, you cannot reliably use let and const yet.

There are some cases where you can safely program with let and const now:

1. If you are targeting only a specific Javascript engine and you know that it has support for those features (such as a specific version of nodejs or a plug-in only for a specific version of a specific browser).

2. If you are using a transpiler that will convert your code to code that will run in all browsers. When using a transpiler, you can write your code using the latest features and the transpiler will "dumb it down" so that your code will work in older browsers by using simulations of the newer features.

If you are programming for an environment where you know that let and const are supported, then it is advisable to use them as appropriate. If you declare a variable at the top of your function, then let and var will do the same thing.

If you declare a variable in a smaller scope within the function, then let will be contained within the smaller scope, but var will be hoisted to the top of the function and will have function scope, no matter where it is declared.

---

The AirBnb Style Guide you linked to is specifically written for an ES6 environment (note there is a separate link for an ES5 version of their style guide). So, that means that they are assuming an ES6 capable environment. That's either because they are targeting a server-side JS engine that they know supports ES6 or because they are using a transpiler that will convert ES6 code into something that will run on an ES5 engine.

---

A note about transpilers. Before using a transpiler and switching all variable declarations to let within block scopes, it is worth understanding what kind of code the transpiler generates and whether the extra code it generates has any effect on the performance of your application. For example, block scope for let is simulated by creating an inline IIFE which can lead to extra run-time overhead for every block that contains a let statement. I'm not saying this is necessarily a bad thing that should keep you from using a transpiler, but when deciding whether to use a transpiler, I'd suggest that you thoroughly familiarize yourself with what the transpiled code looks like for a variety of ES6 features so you know whether it is the right tool for any job you have or only for some jobs.

这篇关于Javascript 中的块作用域、函数作用域和局部作用域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！