作用域是什么

作用域就是一套设计良好的规则，用来规范程序中变量如何存储以及在程序需要某个变量时如何找到变量。

那我们要在哪里而且怎样设置这些作用域的规则呢？首先我们先来了解一下编译原理

编译原理

JavaScript是一门编译语言，但它与传统编译语言不同，它不是提前编译的，编译结果也不能在分布式系统中进行移植，尽管如此，JavaScript引擎进行编译的步骤和传统的编译语言非常相似，只是说某些环节可能比预想的要复杂

传统编译语言编译流程：

分词/词法分析： 将由字符组成的字符串分解成（对编程语言来说）有意义的代码块，这些代码块被称为词法单元
解析/语法分析： 将词法单元流（数组）转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树。这个树被称为“抽象语法树（Abstract Syntax Tree,AST）”
代码生成： 将AST转换为可执行代码的过程称为代码生成

JavaScript 的编译过程要复杂的多

在语法分析和代码生成阶段由特定的步骤来对运行性能进行优化，包括对冗余元素进行优化
大部分情况下编译发生在代码执行前的几微秒（甚至更短）的时间内

理解作用域

为了更好的理解作用域，我们先来理解一下以下三个概念

引擎： 从头到尾负责整个JavaScript程序的编译及执行过程
编译器： 引擎的好朋友之一，负责整个语法分析及代码生成
作用域： 引擎的另一位好朋友，负责收集并维护由所有声明的标识符（变量）组成的一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限

引擎，编译器，作用域它们三者间是怎样工作的呢？

首先，当我们看到var a = 2;这段程序时，我们很可能认为这是一操作，实际上这里有两个完全不同的操作，一个由编译器在编译时处理(var a)，一个则由引擎在运行时处理(a = 2)，那它们两者间又是如何协调工作的呢？

遇到var a,编译器会询问作用域是否已经有一个该名称的变量存在于同一个作用域的集合中。如果是，编译器会忽略该声明 ，继续进行编译；否则它会要求作用域在当前作用域的集合中声明一个新的变量，并命名为a
接下来编译器会为引擎生成运行时所需的代码，这些代码被用来处理 a=2这个赋值操作。引擎运行时首先询问作用域，在当前的作用域集合中是否存在一个叫做a的变量。如果是，引擎就会使用这个变量；如果否，引擎会继续查找该变量（顺着作用域链查找）

编译器在编译过程中的第二步中生成了代码，引擎执行它时，是通过怎样的方式来查找变量a的呢？

LHS查询：当变量出现在赋值操作的左侧时进行LHS查询；LHS查询是试图找到变量的容器本身，从而可以对其赋值
RHS查询：当变量出现在右侧时进行RHS查询；RHS查询就是简单地查找某个变量地值

eg:下面的程序中有存在几处RHS查询与LHS查询

function foo(a){
    console.log(a)    // 2
}
foo(2)

1.foo(...)函数地调用进行了RHS查询，意味着去找foo的值

2.代码中隐式的 a=2操作，进行了LHS查询

3.console.log(a),对a 进行了RHS查询

为了更好的理解三者，我们来看下面的这个例子，并把它想象成以下一段对话

function foo(a){
    consoel.log(a)
}
foo(2)

引擎：我说作用域，我需要为 foo 进行 RHS 引用。你见过它吗？

作用域：别说，我还真见过，编译器那小子刚刚声明了它。它是一个函数，给你。

引擎：哥们太够意思了！好吧，我来执行一下 foo。

引擎：作用域，还有个事儿。我需要为 a 进行 LHS 引用，这个你见过吗？

作用域：这个也见过，编译器最近把它声名为 foo 的一个形式参数了，拿去吧。

引擎：大恩不言谢，你总是这么棒。现在我要把 2 赋值给 a。

引擎：哥们，不好意思又来打扰你。我要为 console 进行 RHS 引用，你见过它吗？

作用域：咱俩谁跟谁啊，再说我就是干这个。这个我也有，console 是个内置对象。给你。

引擎：么么哒。我得看看这里面是不是有 log(..)。太好了，找到了，是一个函数。

引擎：哥们，能帮我再找一下对 a 的 RHS 引用吗？虽然我记得它，但想再确认一次。

作用域：放心吧，这个变量没有变动过，拿走，不谢。

引擎：真棒。我来把 a 的值，也就是 2，传递进 log(..)。

作用域嵌套

当一个块或函数嵌套在另一个块或函数中时，就发生了作用域的嵌套。因此，在当前作用域中无法找到某个变量时，引擎就会在外层嵌套的作用域中继续查找，直到找到该变量，或抵达最外层的作用域（也就是全局作用域）为止

! 在变量还没声明（在任何作用域中都无法找到该变量）的情况下，LHS查询，RHS查询的行为是不一样的

RHS查询在所有嵌套的作用域中遍寻不到所需的变量，引擎就会抛出ReferenceError
(非严格模式下)执行LHS查询，如果在顶层（全局作用域）中也无法找到目标变量，全局作用域中就会创建一个具有该名称的变量，并将其返还给引擎；（严格模式下）会抛出同RHS查询失败时类似的ReferenceError
RHS 查询找到了一个变量，但是对这个变量的值进行不合理的操作，比如试图对一个非函数类型的值进行函数调用，或着引用 null 或 undefined 类型的值中的属性，那么引擎会抛出另外一种类型的异常，叫作 TypeError。

与作用域相关的两类异常错误

ReferenceError：作用域判别失败相关
TypeError：代表作用域判别成功了，但是对结果的操作是非法或不合理的

词法作用域

词法作用域是一套关于引擎如何寻找变量以及会在何处找到变量的规则; 它的定义过程发生在代码的书写阶段（没有使用eval()或with）; 词法作用域关注函数在何处声明；

概念：词法作用域是定义在词法阶段的作用域。换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法分析器处理代码时会保持作用域不变（大部分情况下是这样）

eg:

function foo(a){
    var b = a*2;
    function bar(c){
        console.log(a,b,c);
    }
    bar(b*3);
}
foo(2)  //2,4,12

上述例子中有三个逐级嵌套的作用域。 1.全局作用域：只有一个标识符：foo 2.foo所创建的作用域：其中有三个标识符：形参a,变量b, bar 3.bar 所创建的作用域：其中只有一个标识符：c

作用域的查找：

1.从运行时所处的最内部作用域开始，逐级向外或者说向上进行，直到遇到第一个匹配的标识符为止

2.在多层嵌套作用域中可以定义同名的标识符，这叫做“遮蔽效应”（内部的标识符“遮蔽”了外部的标识符）

! 无论函数在哪里被调用，也无论它如何被调用，它的词法作用域都只由函数被声明时所处的位置决定

词法作用域查找只会查找一级标识符，如果代码中引用了foo.bar.baz,词法作用域查找只会试图查找foo标识符，找到这个变量后，对象的属性访问规则会分别接管对bar和baz属性的访问。

欺骗词法：

词法作用域完全由写代码期间函数所声明的位置来定义，但是javaScript中有两种机制可以在运行时“修改”词法作用域

欺骗词法作用域会导致性能下降

1.eval():可以在运行期修改书写期的词法作用域

function foo(str,a){
    eval(str)
    console.log(a,b)
}
var b = 2
foo("var b=3",1)  // 1,3

eval(str)实际上是在foo(...)内部创建了一个变量b,并遮蔽了外部（全局）作用域中的同名变量

在严格模式下，eval(...)在运行时有其自己的词法作用域，无法修改所在的作用域

function foo(str){
    "use strict"
    eval(str)
    console.log(a)  // ReferenceError: a is not defined
}
foo("var a=1")

2.with():重复引用同一个对象中的多个属性的快捷方式，可以不需要重复引用对象本身

var o1 = {
    a:1,
    b:2
}
var o2 = {
    b:3
}
function foo(obj){
    with(obj){
        a=3
        b=4
    }
}
foo(o1)  // o1:{a:3,b:4}
foo(o2) // o2:{b:4}
window.a // 3

这个例子中o1和o2 两个对象，其中o1具有a属性，o2不具有,foo(...)函数接收一个obj参数，该参数是对象引用，并对这个对象引用执行了with(obj){...},从例子可以看出，with中所声明的作用域是所处的对象。因此在o1的作用域中，我们能找到标识符a,因此进行了正常的LHS查询，而o2的作用域跟全局作用域中都没有找到标识符a,因此当 a = 3执行时，自动创建了一个全局变量(非严格模式下)

eval(...)和with的副作用：引擎无法在编译时对作用域查找进行优化，因为引擎只能谨慎地认为这样的优化时无效的。使用其中任何一种方法都将导致代码运行变慢。

函数作用域

函数作用域的含义是指，属于这个函数的全部变量都可以在整个函数的范围内使用及复用

function doSomething(a){
    var b
    b = a + doSomethingElse(a * 2)
    function doSomethingElse(a){
        return a-1
    }
}

function foo(){
    function bar(a){
        i = 3
        console.log(a + i)
    }
    for(var i=0;i<10;i++){
        bar(i * 2)
    }
}

块作用域

为什么要有块作用域呢？

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

我们在for循环的头部直接定义了变量i ,通常只是想在for循环内部的上下文中使用i,但是我们忽略了这个i会被绑定到外部作用域（函数或全局）

在来看下面的一个例子：

var foo = true
if(foo){
    var bar = foo * 2
    bar = something(bar)
    console.log(bar)
}

bar变量仅在if声明的上下文中使用，因此如果能将它声明在if块的内部中会是一个很有意义的事情。但是，当使用var 声明变量时，它写在哪里都是一样的，因为他们最终都会属于外部作用域。上述代码只是伪装出的形式上的块作用域块作用域的用处：

1.变量的声明应该距离使用的地方越近越好，并最大限度地本地化
2.块作用域时一个用来对之前的最小授权原则惊醒扩展的工具，将代码从在函数中隐藏信息扩展为块中隐藏信息

表面上JavaScript并没有块级作用域的相关功能，以下几种形式中存在块作用域

1.with关键字：用with从对象中创建出的作用域仅在with声明中而非外部作用域中有效

var obj={
    a:1,
    b:2
}
with(obj){
    var a=2
    b=4
    console.log(a)   // 2
}
console.log(obj)  // {a:2,b:4}
console.log(a)    //ReferenceError a is not defined

由此可见：with从对象中创建出的作用域仅在with声明中有效

2.try/catch: JavaScript的ES3规范中规定try/catch的catch分句会创建一个块作用域，其他声明的变量尽在catch内部有效

try{
    undefined(); // 执行一个非法操作来强制制造一个异常
}catch(err){
    console.log(err)   //能够正常执行
}

console.log(err)  //ReferenceError err is not defined

变形：

<!--1-->
try{
    undefined(); // 执行一个非法操作来强制制造一个异常
}catch(err){
    var a = 10;
    console.log(a)   // 10
    console.log(err)   //能够正常执行
}
console.log(a)  //10

<!--2-->
var a = 10
try{
    undefined(); // 执行一个非法操作来强制制造一个异常
}catch(a){
    var a = 13
    console.log(a)   //13
}
console.log(a)  // 10

由上两个例子可以看出，catch分句会创造一个块级作用域，但是只针对catch(..)中的参数

3.let: ES6 引入let 关键字可以将变量绑定到所在的任意作用域中（通常是{...}内部）。换句话说，let为其声明的变量隐式地创建了块作用域

var foo = true
if(foo){
    let bar = foo*2
    bar = 6
    console.log(bar) // 6
}
console.log(bar)  //ReferenceError

用let将变量附加在一个已经存在的块作用域上的行为是隐式的。在开发和修改代码的过程中，如果没有密切关注哪些块作用域中有绑定的变量，并且习惯性地移动这些块或者将其包含在其中地块中，就会导致代码变得混乱

为块作用域显示地创建块可以部分解决这个问题，使变量地附属关系变得更加清晰

var foo = true
if(foo){
    {   // 显示地创建块
        let bar = foo * 2
        bar = 6
        console.log(bar)  // 6
    }
}
console.log(bar)  // ReferenceError

使用let 进行的声明不会在块作用域中进行提升。声明的代码被运行之前，声明并不“存在”

4.const: 可以用来创建块作用域变量，但其值是固定的（常量）。之后任何试图修改值的操作都会引起错误

小结

1.函数是JavaScript中最常见的作用域单元。本质上声明在一个函数内部的变量或函数会在所处的作用域中“隐藏”起来
2.但函数不是唯一的作用域单元。块作用域指的是变量和函数不仅可以属于所处的作用域，也可以属于某个代码块（通常指{...}内部）
3.函数作用域和块作用域的行为是一样的：任何声明在某个作用域内的变量，都将附属于这个作用域

提升

首先先来看两个例子，思考一下为什么会是以下结果？

eg1:思考为什么输出2

a = 2
var a
console.log(a)    // 2

eg2:思考为什么输出undefined

console.log(a)
var a = 2

产生上述问题的原因是：JavaScript引擎会在解释JavaScript代码之前首先对其进行编译。编译阶段中的一部分工作就是找到所有的声明，并用合适的作用域将它们关联起来因此，包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理所以 var a = 2，JavaScript实际上会将其看成两个声明；var a 和 a = 2;第一个定义声明是在编译阶段进行的。第二个赋值声明会被留在原地等待执行阶段

eg1中的代码会以如下形式进行处理:第一部分是编译，第二部分是执行

var a 
a=2
console.log(a)

eg2中的代码按照以下形式处理：

var a 
console.log(a)
a = 2

上述过程就好像变量和函数声明从它们在代码中出现的位置被“移动”到最上面，这个过程就叫作提升。

只有声明本身会被提升，而赋值或其他运行逻辑会留在原地

函数优先

1.函数声明和变量声明都会被提升。但是函数会首先被提升，然后才是变量
2.后面的函数声明还是可以覆盖前面的。

foo()  // 3
function foo(){
    console.log(1)
}
var foo = function(){  //函数声明会被提升到普通变量之前，但它是重复的声明（因此被忽略了）
    console.log(2)
}
function foo(){
//函数声明还是可以覆盖前面的
    console.log(3)
}

动态作用域

```!
动态作用域关注函数从何处调用  (this)
```

作用域闭包

当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行

无论何时何地，如果将函数（访问它们各自的词法作用域）当作第一级的值类型并到处传递，你就会看到闭包在这些函数中的应用。在定时器、事件监听器、Ajax请求、跨窗口通信、web Workers 或者任何其他的异步（或者同步）任务中，只要使用回调函数，实际上就是在使用闭包

闭包的实际应用

1.模块

```
function foo(){
    var something = "cool";
    var another = [1,2,3];
    function doSomething(){
        console.log(something)
    }
    function doAnother(){
        console.log(another.join("!"))
    }
}
```

变形

```
    function CoolModule(){
        var something = "cool";
        var another = [1,2,3];
        function doSomething(){
            console.log(something);
        }
        function doAnother(){
            console.log(another.join("!"));
        }
        //模块的公共API
        return {
            doSomething:doSomething,
            doAnother:doAnother
        }
    }
    
    var foo = CoolModule();    //通过foo来访问API中的属性方法
    foo.doSomething();   //cool
    foo.doAnother();    //1!2!3
```

这个模式在JavaScript中被称为模块。最常见的实现模块模式的方法通常被称为模块暴露

模块模式需要具备的两个必要条件：
    1.必须有外部的封闭函数，该函数必须至少被调用一次（每次调用都会创建一个新的模块实例）
    2.封闭函数必须返回至少一个内部函数，这样内部函数才能在私有作用域中形成闭包，并且可以访问或者修改私有状态
    
    
现代的模块机制

```
    var MyModules = (function Manager(){
        var modules = {}
        function define(name,deps,impl){
            for(var i=0;i<deps.length;i++){
                deps[i] = modules[deps[i]]
            }
            modules[name] = impl.apply(impl,deps)
        }
        function get(name){
            return modules[name]
        }
        return {
            define:define,
            get:get
        }
    })()
    
    定义模块
    MyModules.define("bar",[],function(){
        function hello(who){
            return "let me introduce: " + who;
        }
        return {
            hello:hello
        };
    });
    
    MyModules.define("foo",["bar"],function(bar){
        var hungry = "hippo";
        function awesome(){
            console.log(bar.hello(hungry).toUpperCase());
        }
        return {
            awesome:awesome
        };
    });
    
    var bar = MyModules.get("bar");
    var foo = MyModules.get("foo")
    
    console.log(bar.hello("hippo"));   //let me introduce:hippo
    
    foo.awesome();   //LET ME INTRODUCE: HIPPO
```

javaScript基础篇 - 作用域（1）