js的作用域和闭包

当我写一段js代码并运行时，有三个非常重要的角色：引擎、 编译器、 作用域

下面模拟一段js代码运行的过程
如下代码

var a = 2

1. 遇到var a 编译器会询问作用域是否已经有一个变量a存在于统一作用域下，如果有则忽略该声明，继续进行编译，，否则会要求作用域在当前作用域声明新的变量a
2. 编译器会为引擎生产运行时所需要的代码，用来处理a=2的赋值操作，引擎运行时，会先询问作用域是否有变量a，如果是，会引用这个变量，否则，引擎会继续查找该变量。
3. 如果引擎找到了a，就把2赋值给它。否则引擎就会丢出一个异常

词法作用域

1. let:可以将变量绑定在所在的作用域内（通常是{....}内部），也就是说let为它声明的变量隐式的劫持了所在的块作用域
   注意：使用显式的代码能让代码更加的清晰，如下

var a = 6
if (a) {
    {    // <--  显式的块
        let boy = "Jack"
        console.log(boy)
    }
}

声明提前的小细节

查看以下代码

foo()    //TypeError 此时只声明了foo，并未定义foo是函数
bar()    //ReferenceError      找不到bar

var foo = function bar() {
    console.log("hello")
}

以上代码会被理解为以下形式

var foo

foo()
bar()

foo = function () {
    var bar = ..self..
}

注意：包括函数表达式的赋值操作在内的赋值操作不会被提升

闭包

考虑如下代码

function foo() {
    var a = 2

    function bar() {
        console.log(a)
    }

    return bar
}

var baz = foo()

baz()      //2  这就是典型的闭包了

我们打开控制台研究下这段代码

看看绿色箭头处，这就是闭包

注意：无论何种方式将内部函数传递到所在的词法作用域外，它都会持有对原始作用域的引用，无论在何处执行这个函数，都会使用闭包

闭包的本质

将（访问它们各自词法作用域的）函数当作第一级的值类型并且到处传递，这就是闭包

考虑以下例子

function CoolModule() {
    var something = "cool"
    var another = [1, 2, 3]

    function dosomeThing() {
        console.log(something)
    }

    function doAnother() {
        console.log(another.join("!"))
    }

    return {
        doSomeThing: dosomeThing,
        doAnother: doAnother
    }
}

var foo = CoolModule()

foo.doSomeThing()    //cool
foo.doAnother()    //1!2!3

这是典型的闭包应用，在js中被称为模块，最常见的实现模块的方式通常被称为模块暴露

模块模式需要具备两个必要条件

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

模块模式的功能

命名将要作为公共API返回的对象

var foo = (function CoolModule(id) {
  function change() {
    publickAPI.identify = identify2
  }

  function identify1() {
    console.log(id)
  }

  function identify2() {
    console.log(id.toUpperCase())
  }

  var publickAPI = {
    change: change,
    identify: identify1
  }

  return publickAPI
})("foo module")

foo.identify()    //foo module
foo.change()
foo.identify()    //FOO MODULE

通过模块化实例的内部保留对公共API对象的内部引用，可以从内部对模块实例进行修改，包括添加或删除方法和属性，以及修改它们的值

现代化的模块机制

大多数模块依赖加载器/管器本质上都是将这种模块定义封装进一个友好的API

考虑如下代码：

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() {
    return modules[name]
  }

  return {
    define: define,
    get: get
  }
})()