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

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

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

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

全局作用域：全局只是一个窗口级作用域。在这里，整个应用程序中都存在变量。Functional Scope：在带有var关键字的函数中声明的变量具有函数作用域。

每当调用一个函数时，就会创建一个变量范围对象（并包含在范围链中），然后是JavaScript中的变量。

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

作用域链-->

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

现在，当一个变量a需要时，它首先搜索最近的变量范围，如果变量不在，则将其移动到变量范围链的下一个对象。在这种情况下，这是窗口级别。

（函数foo（）｛console.log（foo）｝）（）；console.log（foo类型）；//未定义，因为“foo”的作用域是它自己的表达式//但是，像这样（函数foo（）{console.log（'1:'，foo）//函数foofoo=100console.log（'2:'，foo）//函数foo，不是100，为什么？})()

下面是一个示例：

<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>

您将需要调查闭包，以及如何使用它们创建私有成员。

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

尝试以下功能：

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.jshttps://github.com/austincheney/Pretty-Diff/blob/master/lib/jspretty.js

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