JavaScript 中变量的作用域是什么？

Question

javascript中变量的作用域是什么？ 它们在函数内部和外部具有相同的作用域吗？ 或者说这有什么关系吗？ 另外，如果全局定义变量，它们存储在哪里？

Answer 1

内联处理程序

前端编码人员经常遇到的一个尚未描述的非常常见的问题是 HTML 中内联事件处理程序可见的范围 - 例如，

<button onclick="foo()"></button>

on* 属性可以引用必须 可以是：

• 全局（工作内联处理程序几乎总是引用全局变量）
• 文档的属性（例如，querySelector 作为独立变量将指向document.querySelector;罕见）
• 处理程序附加到的元素的属性（如上；罕见）

否则，在调用处理程序时您将得到一个ReferenceError。 因此，例如，如果内联处理程序引用内部定义的函数window.onload或$(function() {，则引用将会失败，因为内联处理程序可能只引用全局范围内的变量，并且该函数不是全局的：

window.addEventListener('DOMContentLoaded', () => {
  function foo() {
    console.log('foo running');
  }
});

<button onclick="foo()">click</button>

document 的属性和处理程序所附加的元素的属性也可以在内联处理程序中作为独立变量进行引用，因为内联处理程序被调用 内部两个 with 块，一个用于文档，一个用于元素。 这些处理程序内的变量作用域链极其不直观，并且工作的事件处理程序可能需要函数是全局的（并且应该避免不必要的全局污染应该避免）。

由于内联处理程序内的作用域链非常奇怪，并且由于内联处理程序需要全局污染才能工作，并且由于内联处理程序有时在传递参数时需要丑陋的字符串转义，因此可能更容易避免它们。 相反，使用 Javascript 附加事件处理程序（例如使用 addEventListener），而不是使用 HTML 标记。

function foo() {
  console.log('foo running');
}
document.querySelector('.my-button').addEventListener('click', foo);

<button class="my-button">click</button>

模块 (

另一方面，与正常的

<script>
const foo = 'foo';
</script>
<script>
console.log(foo);
</script>

但 ES6 模块的顶层不是全局的。 在 ES6 模块顶部声明的变量仅在该模块内部可见，除非该变量被显式导出，或者除非它被分配给全局对象的属性。

<script type="module">
const foo = 'foo';
</script>
<script>
// Can't access foo here, because the other script is a module
console.log(typeof foo);
</script>

ES6 模块的顶层类似于普通

Answer 2

我发现许多 JavaScript 新手很难理解该语言默认情况下可以使用继承，并且到目前为止，函数作用域是唯一的作用域。 我为去年年底编写的一个名为 JSPretty 的美化器提供了一个扩展。 颜色功能在代码中起作用，并且始终将颜色与该范围内声明的所有变量相关联。 当具有来自一个范围的颜色的变量在不同的范围中使用时，可以直观地演示闭包。

尝试以下位置的功能：

• http://prettydiff.com/jspretty.xhtml?c=white& jsscope

请参阅演示：

• http://prettydiff.com/jspretty.xhtml?c=white&jsscope&s=http://prettydiff.com/lib/markup_beauty.js

查看代码：

• http://prettydiff.com/lib/jspretty.js
• https://github.com/austincheney/Pretty-Diff/blob/master/lib/jspretty.js

目前，该功能支持 16 个嵌套函数的深度，但目前不为全局变量着色。

Answer 3

JavaScript 只有两种类型的作用域：

1. 全局作用域：全局只不过是窗口级作用域。在这里，变量存在于整个应用程序中。
2. 函数作用域：在函数内使用 var 关键字声明的变量具有函数作用域。

每当调用函数时，都会创建一个变量作用域对象（并包含在作用域链中），后面跟着 JavaScript 中的变量。

        a = "global";
         function outer(){ 
              b = "local";
              console.log(a+b); //"globallocal"
         }
outer();

作用域链 -->

1. 窗口级别 - a 和 outer 函数位于作用域链的顶层。
2. 当外部函数调用一个新的变量作用域对象（并包含在作用域链中）时，其中添加了变量 b 。

现在，当变量 a 需要时，它首先搜索最近的变量范围，如果变量不存在，则它移动到变量范围链的下一个对象。在本例中是窗口级别。

Answer 4

运行代码。 希望这能提供有关范围界定的想法

Name = 'global data';
document.Name = 'current document data';
(function(window,document){
var Name = 'local data';
var myObj = {
    Name: 'object data',
    f: function(){
        alert(this.Name);
    }
};

myObj.newFun = function(){
    alert(this.Name);
}

function testFun(){
    alert("Window Scope : " + window.Name + 
          "\nLocal Scope : " + Name + 
          "\nObject Scope : " + this.Name + 
          "\nCurrent document Scope : " + document.Name
         );
}


testFun.call(myObj);
})(window,document);

Answer 5

全局范围：

全局变量就像全球明星（成龙、纳尔逊·曼德拉）一样。 您可以从应用程序的任何部分访问它们（获取或设置值）。 全球职能就像全球活动（新年、圣诞节）。 您可以从应用程序的任何部分执行（调用）它们。

//global variable
var a = 2;

//global function
function b(){
   console.log(a);  //access global variable
}

本地范围：

如果您在美国，您可能认识金·卡戴珊（Kim Kardashian），臭名昭著的名人（她以某种方式设法制作小报）。 但美国以外的人不会认出她。 她是当地的明星，绑定在她的领土上。

局部变量就像局部星星。 您只能在范围内访问它们（获取或设置值）。 本地函数就像本地事件 - 您只能在该范围内执行（庆祝）。 如果您想从范围之外访问它们，您将收到参考错误

function b(){
   var d = 21; //local variable
   console.log(d);

   function dog(){  console.log(a); }
     dog(); //execute local function
}

 console.log(d); //ReferenceError: dddddd is not defined    

---

查看这篇文章深入了解范围

Answer 6

JavaScript 作用域几乎只有两种类型：

• 每个 var 声明的作用域与最直接的封闭函数相关联，
• 如果 var 声明没有封闭函数，则它是全局作用域

因此，除函数之外的任何块都不会创建新的范围。 这解释了为什么 for 循环会覆盖外部作用域变量：

var i = 10, v = 10;
for (var i = 0; i < 5; i++) { var v = 5; }
console.log(i, v);
// output 5 5

使用函数代替：

var i = 10, v = 10;
$.each([0, 1, 2, 3, 4], function(i) { var v = 5; });
console.log(i,v);
// output 10 10

在第一个示例中，没有块作用域，因此最初声明的变量被覆盖。 在第二个示例中，由于该函数存在新的作用域，因此最初声明的变量被隐藏，并且没有被覆盖。

这几乎是您在 JavaScript 作用域方面需要了解的所有内容，除了：

• try/catch 仅针对异常变量本身引入新作用域，其他变量没有新作用域
• with-clause 显然是另一个异常，但高度使用 with-clause 它不鼓励（https://developer.mozilla.org/en -US/docs/Web/JavaScript/Reference/Statements/with）

因此您可以看到 JavaScript 作用域实际上非常简单，尽管并不总是直观的。 有几点需要注意：

• var 声明被提升到作用域的顶部。 这意味着无论 var 声明发生在哪里，对于编译器来说，就好像 var 本身发生在
• 同一范围内的顶部多个 var 声明组合在一起

所以这段代码：

var i = 1;
function abc() {
  i = 2;
  var i = 3;
}
console.log(i);     // outputs 1

相当于：

var i = 1;
function abc() {
  var i;     // var declaration moved to the top of the scope
  i = 2;
  i = 3;     // the assignment stays where it is
}
console.log(i);

这可能看起来违反直觉，但它使得从命令式语言设计者的角度来看。

Answer 7

只是为了添加其他答案，范围是所有声明的标识符（变量）的查找列表，并强制执行一组严格的规则来确定当前执行的代码如何访问这些标识符。 此查找可能是为了分配给变量（LHS（左侧）引用），也可能是为了检索其值（RHS（右侧）引用）。 这些查找是 JavaScript 引擎在编译和执行代码时在内部执行的操作。

因此，从这个角度来看，我认为我在 Kyle Simpson 的《作用域和闭包》电子书中找到的一张图片会有所帮助：

引用他的电子书：

这座建筑代表了我们程序的嵌套范围规则集。 首先
建筑物的楼层代表您当前执行的范围，
无论你在哪。 大楼的顶层是全局范围。
您可以通过查看当前楼层来解析 LHS 和 RHS 参考，
如果没找到就坐电梯到下一层
看看那里，然后看看下一个，依此类推。 一旦你到达顶楼
（全球范围），你要么找到你正在寻找的东西，要么你
不。 但无论如何你都必须停下来。

值得一提的是，“一旦找到第一个匹配项，范围查找就会停止”。

“范围级别”的概念解释了为什么“this”可以通过新创建的范围进行更改（如果在嵌套函数中查找）。
这是一个包含所有这些详细信息的链接，您想要的一切了解 javascript 作用域

Answer 8

现代 Js、ES6+、“const”和“let”

您应该为您创建的每个变量使用块作用域，就像大多数其他主要语言一样。 var 已过时。 这使您的代码更安全且更易于维护。

const 应该用于95% 的情况。 它使得变量引用无法更改。 数组、对象和 DOM 节点属性可以更改，并且应该是 const。

let 应该用于任何需要重新分配的变量。 这包括在 for 循环内。 如果您在初始化之外更改值，请使用 let。

块作用域意味着该变量仅在声明它的括号内可用。 这扩展到内部作用域，包括在您的作用域内创建的匿名函数。

Answer 9

试试这个奇怪的例子。 在下面的示例中，如果 a 是一个初始化为 0 的数字，您会看到 0，然后是 1。除了 a 是一个对象之外，javascript 会向 f1 传递 a 的指针而不是它的副本。 结果是您两次都会收到相同的警报。

var a = new Date();
function f1(b)
{
    b.setDate(b.getDate()+1);
    alert(b.getDate());
}
f1(a);
alert(a.getDate());

Answer 10

JS 中只有函数作用域。 不是块范围！
您也可以看到正在提升的内容。

var global_variable = "global_variable";
var hoisting_variable = "global_hoist";

// Global variables printed
console.log("global_scope: - global_variable: " + global_variable);
console.log("global_scope: - hoisting_variable: " + hoisting_variable);

if (true) {
    // The variable block will be global, on true condition.
    var block = "block";
}
console.log("global_scope: - block: " + block);

function local_function() {
    var local_variable = "local_variable";
    console.log("local_scope: - local_variable: " + local_variable);
    console.log("local_scope: - global_variable: " + global_variable);
    console.log("local_scope: - block: " + block);
    // The hoisting_variable is undefined at the moment.
    console.log("local_scope: - hoisting_variable: " + hoisting_variable);

    var hoisting_variable = "local_hoist";
    // The hoisting_variable is now set as a local one.
    console.log("local_scope: - hoisting_variable: " + hoisting_variable);
}

local_function();

// No variable in a separate function is visible into the global scope.
console.log("global_scope: - local_variable: " + local_variable);

Answer 11

我的理解是有3个作用域：全局作用域，全局可用； 局部作用域，可用于整个函数，无论块如何； 和块作用域，仅适用于使用它的块、语句或表达式。 全局和局部作用域用关键字“var”表示，无论是在函数内部还是外部，块作用域用关键字“let”表示。

对于那些认为只有全局作用域和局部作用域的人，请解释为什么 Mozilla 会有一个完整的页面来描述 JS 中块作用域的细微差别。

https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Statements/let

Answer 12

ES5 及更早版本：

Javascript 中的变量最初（ES6 之前）具有词法函数作用域。 术语词法作用域意味着您可以通过“查看”代码来查看变量的作用域。

使用 var 关键字声明的每个变量的作用域都是该函数。 但是，如果在该函数内声明了其他函数，这些函数将有权访问外部函数的变量。 这称为作用域链。 它以以下方式工作：

1. 当函数寻求解析变量值时，它首先查看自己的作用域。 这是函数体，即大括号 {} 之间的所有内容（除了在此范围内的其他函数内的变量）。
2. 如果它在函数体内找不到变量，它将爬到链上并在定义函数的位置中查看函数中的变量范围。 这就是词法作用域的含义，我们可以在代码中看到定义该函数的位置，因此只需查看代码就可以确定作用域链。

例子：

// global scope
var foo = 'global';
var bar = 'global';
var foobar = 'global';

function outerFunc () {
 // outerFunc scope
 var foo = 'outerFunc';
 var foobar = 'outerFunc';
 innerFunc();
 
 function innerFunc(){
 // innerFunc scope
  var foo = 'innerFunc';
  console.log(foo);
  console.log(bar);
  console.log(foobar);
  }
}

outerFunc();

当我们尝试将变量 foo、bar 和 foobar 记录到控制台时，会发生以下情况：

1. 我们尝试将 foo 记录到在控制台中，foo 可以在函数 innerFunc 本身中找到。 因此，foo 的值被解析为字符串innerFunc。
2. 我们尝试将 bar 记录到控制台，但在函数 innerFunc 本身内部找不到 bar。 因此，我们需要攀爬作用域链。 我们首先查看定义了函数 innerFunc 的外部函数。 这是函数outerFunc。 在outerFunc的范围内，我们可以找到变量bar，它保存字符串“outerFunc”。
3. 在innerFunc 中找不到foobar。 。 因此，我们需要爬上作用域链到innerFunc作用域。 这里也找不到，我们再爬一层到全局作用域（即最外层作用域）。 我们在这里找到变量 foobar，它保存字符串“global”。 如果在爬升作用域链后仍未找到变量，JS 引擎将抛出 referenceError。

ES6 (ES 2015) 及更早版本：

词法作用域和作用域链的相同概念仍然适用于 ES6。 然而，引入了声明变量的新方法。 有以下几种：

• let：创建块作用域变量
• const：创建块作用域变量，必须初始化且不能重新赋值

var 之间最大的区别 和 let/const 是 var 是函数作用域，而 let/const< /code> 是块作用域的。 下面是一个例子来说明这一点：

let letVar = 'global';
var varVar = 'global';

function foo () {
  
  if (true) {
    // this variable declared with let is scoped to the if block, block scoped
    let letVar = 5;
    // this variable declared with let is scoped to the function block, function scoped
    var varVar = 10;
  }
  
  console.log(letVar);
  console.log(varVar);
}


foo();

在上面的示例中，letVar 记录全局值，因为用 let 声明的变量是块作用域的。 它们不再存在于各自的块之外，因此无法在 if 块之外访问该变量。

Answer 13

在 JavaScript 中，有两种类型的作用域：

• 本地作用域
• 全局作用域

下面的函数有一个本地作用域变量 carName。 并且该变量无法从函数外部访问。

function myFunction() {
    var carName = "Volvo";
    alert(carName);
    // code here can use carName
}

下面的类有一个全局范围变量carName。 并且这个变量可以从类中的任何地方访问。

class {

    var carName = " Volvo";

    // code here can use carName

    function myFunction() {
        alert(carName);
        // code here can use carName 
    }
}

Answer 14

我真的很喜欢接受的答案，但我想添加以下内容：

范围收集并维护所有声明的标识符（变量）的查找列表，并强制执行一组严格的规则来确定当前执行的访问方式代码。

范围是一组通过标识符名称查找变量的规则。

• 如果在直接作用域中找不到变量，引擎将查询下一个外部包含作用域，继续直到找到或到达最外层（也称为全局）作用域。
• 是确定在何处以及如何查找变量（标识符）的一组规则。 此查找可能是为了分配给变量，这是一个 LHS（左侧）引用，也可能是为了检索其值，这是一个 RHS（右侧）引用。
• LHS 引用由赋值操作产生。 与作用域相关的赋值可以通过 = 运算符或通过将参数传递给（分配给）函数参数来进行。
• JavaScript 引擎在执行代码之前首先对其进行编译，在此过程中，它会拆分诸如 var a = 2; 之类的语句。 分为两个单独的步骤：1。 首先， var a 在该范围内声明它。 这是在代码执行之前开始执行的。 第二。 稍后，a = 2 查找变量（LHS 引用），如果找到则分配给它。
• LHS 和 RHS 引用查找都从当前执行的作用域开始，如果需要（即，它们在那里找不到所需的内容），它们会沿着嵌套作用域向上工作，一个作用域（一层） ）一次，寻找标识符，直到他们到达全局（顶层）并停止，要么找到它，要么找不到。 未实现的 RHS 引用会导致引发 ReferenceError。 未实现的 LHS 引用会导致自动、隐式创建该名称的全局（如果不在严格模式下），或引用错误（如果在严格模式下）。
• 作用域由一系列“气泡”组成，每个气泡充当容器或桶，在其中声明标识符（变量、函数）。 这些气泡整齐地相互嵌套，并且这种嵌套是在作者时定义的。

Answer 15

在EcmaScript5中，主要有两个作用域，本地作用域和全局作用域，但在EcmaScript6中，我们主要有三个作用域，本地作用域，全局作用域和一个名为的新作用域块范围。

块作用域的示例是：-

for ( let i = 0; i < 10; i++)
{
 statement1...
statement2...// inside this scope we can access the value of i, if we want to access the value of i outside for loop it will give undefined.
}

Answer 16

ECMAScript 6 引入了 let 和 const 关键字。 这些关键字可以用来代替 var 关键字。 与 var 关键字相反，let 和 const 关键字支持块语句内局部作用域的声明。

var x = 10
let y = 10
const z = 10
{
  x = 20
  let y = 20
  const z = 20
  {
    x = 30
    // x is in the global scope because of the 'var' keyword
    let y = 30
    // y is in the local scope because of the 'let' keyword
    const z = 30
    // z is in the local scope because of the 'const' keyword
    console.log(x) // 30
    console.log(y) // 30
    console.log(z) // 30
  }
  console.log(x) // 30
  console.log(y) // 20
  console.log(z) // 20
}

console.log(x) // 30
console.log(y) // 10
console.log(z) // 10

Answer 17

(function foo() { console.log(foo) })();
console.log(typeof foo); // undefined, because `foo` is scoped to its own expression

//but, like this
(function foo() {
    console.log('1:', foo) // function foo
    foo = 100
    console.log('2:', foo) // function foo, is not 100, why?
})()

Answer 18

JavaScript 中有两种类型的作用域。

1. 全局范围：在全局范围内声明的变量可以在程序中的任何地方非常顺利地使用。 例如：

   var carName = "宝马"; 
   
     // 这里的代码可以使用carName 
   
     函数 myFunction() { 
          // 这里的代码可以使用carName  
     } 
     

2. 函数作用域或局部作用域：在此作用域中声明的变量只能在其自己的函数中使用。 例如：

   //这里的代码不能使用carName 
     函数 myFunction() { 
        var 汽车名称 = "宝马"; 
        // 这里的代码可以使用carName 
     } 
     

Answer 19

TLDR

JavaScript 具有词法（也称为静态）作用域和闭包。 这意味着您可以通过查看源代码来了解标识符的范围。

这四个范围是：

1. 全局 - 对所有内容可见
2. 功能 - 在函数（及其子函数和块）内可见
3. 块 - 在块（及其子块）内可见
4. 模块 - 在模块内可见

除了特殊情况外全局和模块作用域，变量使用 var（函数作用域）、let（块作用域）和 const（块作用域）声明。 大多数其他形式的标识符声明在严格模式下具有块作用域。

概述

范围是标识符有效的代码库区域。

词法环境是标识符名称和与其关联的值之间的映射。

作用域由词法环境的链接嵌套构成，嵌套中的每个级别对应于祖先执行上下文的词法环境。

这些链接的词汇环境形成了范围“链”。 标识符解析是沿着这条链搜索匹配标识符的过程。

标识符解析仅发生在一个方向：向外。 这样，外部词汇环境就无法“看到”内部词汇环境。

决定范围时需要考虑三个相关因素： //www.ecma-international.org/ecma-262/10.0/index.html#sec-names-and-keywords" rel="noreferrer">JavaScript 中的标识符：

1. 如何声明标识符
2. 标识符在哪里已声明
3. 无论您处于严格模式还是非严格模式

声明标识符的一些方式：

1. var 、let 和 const
2. 函数参数
3. Catch 块参数
4. 函数声明
5. 命名函数表达式
6. 全局对象上隐式定义的属性（即缺少 var code> 非严格模式）
7. import 语句
8. eval

可以声明一些位置标识符：

1. 全局上下文
2. 函数体
3. 普通块
4. 控制结构的顶部（例如，循环、 if、 while 等）
5. 控制结构体
6. 模块

声明样式

var

使用 var 声明的标识符 具有函数作用域，除了直接在全局上下文中声明的情况之外，在在这种情况下，它们将作为属性添加到全局对象上并具有全局范围。 它们在 eval 函数中的使用有单独的规则。

let 和 const

使用 let 和 const 声明的标识符具有块作用域，除非它们直接在全局上下文中声明，在这种情况下它们具有全球范围。

注意：let、const和var都是吊起。 这意味着它们定义的逻辑位置是其封闭范围（块或函数）的顶部。 但是，在控制权通过源代码中的声明点之前，无法读取或分配使用 let 和 const 声明的变量。 过渡期被称为暂时死区。

function f() {
    function g() {
        console.log(x)
    }
    let x = 1
    g()
}
f() // 1 because x is hoisted even though declared with `let`!

函数参数名称

函数参数名称的作用域为函数体。 请注意，这有一点复杂。 声明为默认参数的函数会关闭参数列表，而不是函数的主体。

函数声明

函数声明在严格模式下具有块作用域，在非严格模式下具有函数作用域。 注意：非严格模式是一组复杂的紧急规则，基于不同浏览器的古怪历史实现。

命名函数表达式

命名函数表达式的作用域仅限于其自身（例如，为了递归的目的）。

全局对象上隐式定义的属性

在非严格模式下，全局对象上隐式定义的属性具有全局作用域，因为全局对象位于作用域链的顶部。 在严格模式下，这些是不允许的。

eval

在 eval 字符串中，使用 var 声明的变量将被放置在当前作用域中，或者，如果间接使用 eval，则作为全局对象。

示例

下面将引发 ReferenceError，因为名称 x、y 和 z 在函数 f.

function f() {
    var x = 1
    let y = 1
    const z = 1
}
console.log(typeof x) // undefined (because var has function scope!)
console.log(typeof y) // undefined (because the body of the function is a block)
console.log(typeof z) // undefined (because the body of the function is a block)

以下代码将为 y 和 z 抛出 ReferenceError，但不会为 x 抛出 ReferenceError，因为 x 的可见性为不受块的限制。 定义控制结构主体的块（如 if、for 和 while）的行为类似。

{
    var x = 1
    let y = 1
    const z = 1
}
console.log(x) // 1
console.log(typeof y) // undefined because `y` has block scope
console.log(typeof z) // undefined because `z` has block scope

在下面的代码中，x 在循环外部可见，因为 var 具有函数作用域：

for(var x = 0; x < 5; ++x) {}
console.log(x) // 5 (note this is outside the loop!)

...由于这种行为，您需要小心关闭循环中使用 var 声明的变量。 这里只声明了一个变量x 实例，并且它在逻辑上位于循环之外。

以下代码打印 5 五次，然后为循环外的 console.log 打印 5 第六次：

for(var x = 0; x < 5; ++x) {
    setTimeout(() => console.log(x)) // closes over the `x` which is logically positioned at the top of the enclosing scope, above the loop
}
console.log(x) // note: visible outside the loop

以下内容会打印 undefined，因为 x 是块作用域的。 回调是一对一异步运行的。 let 变量的新行为意味着每个匿名函数都会通过名为 x 的不同变量关闭（与 var 不同），因此打印整数 0 到 4。：

for(let x = 0; x < 5; ++x) {
    setTimeout(() => console.log(x)) // `let` declarations are re-declared on a per-iteration basis, so the closures capture different variables
}
console.log(typeof x) // undefined

下面的代码不会抛出 ReferenceError 因为 x 的可见性不受块的约束； 但是，它会打印 undefined，因为变量尚未初始化（由于 if 语句）。

if(false) {
    var x = 1
}
console.log(x) // here, `x` has been declared, but not initialised

使用 let 在 for 循环顶部声明的变量的作用域为循环体：

for(let x = 0; x < 10; ++x) {} 
console.log(typeof x) // undefined, because `x` is block-scoped

以下代码将抛出 ReferenceError，因为 x 的可见性受到块的限制：

if(false) {
    let x = 1
}
console.log(typeof x) // undefined, because `x` is block-scoped

使用 var、let 或 const 声明的变量的作用域都是模块：

// module1.js

var x = 0
export function f() {}

//module2.js

import f from 'module1.js'

console.log(x) // throws ReferenceError

下面将在全局对象上声明一个属性，因为使用 声明的变量全局上下文中的 code>var 作为属性添加到全局对象中：

var x = 1
console.log(window.hasOwnProperty('x')) // true

全局上下文中的 let 和 const 不会向全局对象添加属性，但仍然具有全局作用域：

let x = 1
console.log(window.hasOwnProperty('x')) // false

函数参数可以认为是在函数体中声明：

function f(x) {}
console.log(typeof x) // undefined, because `x` is scoped to the function

Catch 块参数的作用域为 catch 块主体：

try {} catch(e) {}
console.log(typeof e) // undefined, because `e` is scoped to the catch block

命名函数表达式的作用域仅限于表达式本身：

(function foo() { console.log(foo) })()
console.log(typeof foo) // undefined, because `foo` is scoped to its own expression

在非严格模式下，全局对象上隐式定义的属性具有全局作用域。 在严格模式下，您会收到错误。

x = 1 // implicitly defined property on the global object (no "var"!)

console.log(x) // 1
console.log(window.hasOwnProperty('x')) // true

在非严格模式下，函数声明具有函数作用域。 在严格模式下，它们具有块作用域。

'use strict'
{
    function foo() {}
}
console.log(typeof foo) // undefined, because `foo` is block-scoped

它是如何工作的

范围被定义为标识符有效的代码的词汇区域。

在 JavaScript 中，每个函数对象都有一个隐藏的 [[Environment]] 引用，它是对 词汇环境 执行上下文（堆栈框架），在其中创建它。

当您调用函数时，会调用隐藏的 [[Call]] 方法。 此方法创建一个新的执行上下文，并在新的执行上下文和函数对象的词法环境之间建立链接。 它通过将函数对象上的 [[Environment]] 值复制到 新执行上下文的词法环境中的外部引用字段。

请注意，新的执行上下文和函数对象的词法环境之间的链接称为闭包。

因此，在 JavaScript 中，作用域是通过外部引用以“链”形式链接在一起的词法环境来实现的。 这个词法环境链称为作用域链，标识符解析通过 在链上搜索以查找匹配的标识符。

了解更多信息。

Answer 20

Javascript 使用作用域链来建立给定函数的作用域。 通常有一个全局作用域，并且定义的每个函数都有其自己的嵌套作用域。 在另一个函数中定义的任何函数都具有链接到外部函数的局部作用域。 定义范围的始终是源代码中的位置。

作用域链中的元素基本上是一个带有指向其父作用域的指针的 Map。

解析变量时，JavaScript 从最内层范围开始向外搜索。

Answer 21

全局声明的变量具有全局作用域。 函数内声明的变量的作用域为该函数，以及同名的影子全局变量。

（我确信真正的 JavaScript 程序员能够在其他答案中指出许多微妙之处。特别是我遇到了 此页面随时了解此的确切含义。 htm#part4" rel="noreferrer">这个更具介绍性的链接足以让您开始。）

Answer 22

老派 JavaScript

传统上，JavaScript 实际上只有两种类型的作用域：

1. 全局作用域：变量在整个应用程序中都是已知的，从应用程序开始(*)
2. 功能范围：变量在范围内已知function 它们是在函数开始时声明的 (*)

我不会详细说明这一点，因为已经有很多其他答案解释了这种差异。

---

现代 JavaScript

最新 JavaScript 规范 现在还允许第三个作用域：

3. 块作用域：标识符是“已知”它们声明的范围的顶部，但在声明行之后才能将它们分配或取消引用（读取）。 这个过渡时期被称为“暂时死区”。

---

如何创建块作用域变量？

传统上，您像这样创建变量：

var myVariable = "Some text";

块作用域变量是这样创建的：

let myVariable = "Some text";

---

那么函数作用域和块作用域之间有什么区别？

要理解函数作用域和块作用域之间的区别，请考虑以下代码：

// i IS NOT known here
// j IS NOT known here
// k IS known here, but undefined
// l IS NOT known here

function loop(arr) {
    // i IS known here, but undefined
    // j IS NOT known here
    // k IS known here, but has a value only the second time loop is called
    // l IS NOT known here

    for( var i = 0; i < arr.length; i++ ) {
        // i IS known here, and has a value
        // j IS NOT known here
        // k IS known here, but has a value only the second time loop is called
        // l IS NOT known here
    };

    // i IS known here, and has a value
    // j IS NOT known here
    // k IS known here, but has a value only the second time loop is called
    // l IS NOT known here

    for( let j = 0; j < arr.length; j++ ) {
        // i IS known here, and has a value
        // j IS known here, and has a value
        // k IS known here, but has a value only the second time loop is called
        // l IS NOT known here
    };

    // i IS known here, and has a value
    // j IS NOT known here
    // k IS known here, but has a value only the second time loop is called
    // l IS NOT known here
}

loop([1,2,3,4]);

for( var k = 0; k < arr.length; k++ ) {
    // i IS NOT known here
    // j IS NOT known here
    // k IS known here, and has a value
    // l IS NOT known here
};

for( let l = 0; l < arr.length; l++ ) {
    // i IS NOT known here
    // j IS NOT known here
    // k IS known here, and has a value
    // l IS known here, and has a value
};

loop([1,2,3,4]);

// i IS NOT known here
// j IS NOT known here
// k IS known here, and has a value
// l IS NOT known here

在这里，我们可以看到变量 j 仅在第一个 for 循环中已知，而不是之前和之后。 然而，我们的变量 i 在整个函数中是已知的。

另外，请考虑块作用域变量在声明之前是未知的，因为它们没有被提升。 您也不允许在同一块内重新声明同一块作用域变量。 这使得块作用域变量比全局或函数作用域变量更不容易出错，全局或函数作用域变量被提升并且在多个声明的情况下不会产生任何错误。

---

现在使用块作用域变量安全吗？

今天使用是否安全，取决于您的环境：

• 如果您正在编写服务器端 JavaScript 代码 (Node.js），您可以安全地使用 let 语句。

• 如果您正在编写客户端 JavaScript 代码并使用基于浏览器的转译器（例如 Traceur 或 babel-standalone），您可以安全地使用 let 语句，但是您的代码在性能方面可能并非最佳。

• 如果您正在编写客户端 JavaScript 代码并使用基于 Node 的转译器（例如 traceur shell 脚本 或 Babel ），您可以安全地使用 let 语句。 而且由于您的浏览器只会了解转译的代码，因此性能缺陷应该是有限的。

• 如果您正在编写客户端 JavaScript 代码并且不使用转译器，则需要考虑浏览器支持。

  以下是一些根本不支持 let 的浏览器：

  • Internet Explorer 10 及更低版本
  • Firefox 43 及更低版本
  • Safari 9 及更低版本
  • Android 浏览器 4 及更低版本
  • Opera 27 及以下
  • 40丁目及以下
  • Opera Mini 的任何版本 黑莓浏览器

---

如何跟踪浏览器支持

了解在您使用时哪些浏览器支持 let 语句的最新概述阅读此答案，请参阅此我可以使用页面。

---

(*) 全局和功能范围的变量可以在声明之前初始化和使用，因为 JavaScript 变量是 提升。这意味着声明始终位于范围的顶部。

Answer 23

下面是一个示例：

<script>

var globalVariable = 7; //==window.globalVariable

function aGlobal( param ) { //==window.aGlobal(); 
                            //param is only accessible in this function
  var scopedToFunction = {
    //can't be accessed outside of this function

    nested : 3 //accessible by: scopedToFunction.nested
  };

  anotherGlobal = {
    //global because there's no `var`
  }; 

}

</script>

您需要研究闭包，以及如何使用它们来创建私有成员。

Answer 24

据我了解，关键在于 Javascript 具有函数级作用域，而不是更常见的 C 块作用域。

这是一篇关于该主题的好文章。

Answer 25

在“Javascript 1.7”（Mozilla 对 Javascript 的扩展）中，还可以使用 < 声明块作用域变量代码>let语句：

 var a = 4;
 let (a = 3) {
   alert(a); // 3
 }
 alert(a);   // 4

Answer 26

JavaScript 作用域的想法最初由 Brendan Eich 设计，来自 HyperCard 脚本语言HyperTalk。

在这种语言中，显示的方式类似于一叠索引卡。 有一张称为背景的主卡。 它是透明的，可以看到是底卡。 此基础卡上的任何内容都与放置在其顶部的卡共享。 放置在顶部的每张卡片都有自己的内容，这些内容优先于前一张卡片，但如果需要，仍然可以访问先前的卡片。

这正是 JavaScript 作用域系统的设计方式。 它只是有不同的名称。 JavaScript 中的卡片称为执行上下文^ECMA< /a>。 这些上下文中的每一个都包含三个主要部分。 变量环境、词法环境和 this 绑定。 回到卡片参考，词法环境包含堆栈中较低位置的先前卡片的所有内容。 当前上下文位于堆栈顶部，其中声明的任何内容都将存储在变量环境中。 在命名冲突的情况下，变量环境将优先。

this 绑定将指向包含对象。 有时，作用域或执行上下文会发生变化，而包含对象不会发生变化，例如在声明的函数中，其中包含对象可能是 window 或构造函数。

这些执行上下文在控制权转移时创建。 当代码开始执行时，控制权就会转移，这主要是通过函数执行来完成的。

这就是技术解释。 在实践中，重要的是要记住，JavaScript

• 范围在技术上是“执行上下文”上下文
• 形成存储变量的环境堆栈堆栈的
• 顶部优先（底部是全局上下文）
• 每个函数都会创建一个执行上下文（但并不总是新的 this 绑定）

将此应用于本页上的先前示例之一（5.“闭包”），可以跟踪执行上下文的堆栈。 在此示例中，堆栈中有三个上下文。 它们由外部上下文、由 var 6 调用的立即调用函数中的上下文以及 var 6 立即调用函数内部的返回函数中的上下文定义。

i) 外部上下文。 它有一个变量环境 a = 1
ii) IIFE 上下文，它有一个 a = 1 的词法环境，但是 a = 6 的变量环境在堆栈中优先
iii) 返回的函数上下文，它有一个 a = 6 的词法环境，这是调用时警报中引用的值。

Answer 27

1) 有全局作用域、函数作用域以及 with 和 catch 作用域。 一般来说，变量没有“块”级作用域——with 和 catch 语句将名称添加到它们的块中。

2) 作用域由函数一直嵌套到全局作用域。

3）通过原型链来解析属性。 with 语句将对象属性名称带入 with 块定义的词法范围中。

编辑：ECMAAScript 6 (Harmony) 被指定为支持 let，而且我知道 chrome 允许使用 'harmony' 标志，所以也许它确实支持它。.

Let 将是对块级作用域的支持，但你必须使用关键字来实现它。

编辑：根据本杰明在评论中指出的 with 和 catch 语句，我编辑了这篇文章，并添加了更多内容。 with 和 catch 语句都将变量引入到各自的块中，并且这是一个块作用域。 这些变量是传递给它们的对象的属性的别名。

 //chrome (v8)

 var a = { 'test1':'test1val' }
 test1   // error not defined
 with (a) { var test1 = 'replaced' }
 test1   // undefined
 a       // a.test1 = 'replaced'

编辑：澄清示例：

test1 的作用域为 with 块，但别名为 a.test1。 'Var test1' 在上层词法上下文（函数或全局）中创建一个新变量 test1，除非它是 a 的属性 -- 确实如此。

哎呀！ 使用“with”时要小心——就像 var 是一个 noop（如果变量已经在函数中定义）一样，对于从对象导入的名称来说，它也是一个 noop！ 对已经定义的名称稍作提示将使这更安全。 因此，我个人永远不会使用 with 。