JavaScript 做用域和闭包理解

做用域：

分为函数做用域，和块级做用域；

函数做用域

函数做用域外面的没法访问函数做用域内部的变量和函数，这样就能够将一些变量和函数隐藏起来；

隐藏起来的好处是

1. 造成命名空间，避免各个函数里面的变量冲突
2. 实现模块管理

内部能够访问外部的；

function foo(a) { var b = 2;
    // 一些代码
    function bar() {
    // ...
    }
    // 更多的代码 var c = 3;
}

bar(); // 失败
console.log( a, b, c ); // 三个全都失败

复制代码

此时，foo里面就是一个函数做用域，能够bar里面又是一个做用域；最外面固然就是全局做用域；

能够把函数看着一个能够单向向外访问的圈子；

函数表达式 vs 函数声明

这里须要重点区分一下：

1. 函数声明： function 是声明中 的第一个词，那么就是一个函数声明；
2. 函数表达式：除此以外就是函数表达式；
3. 函数表达式能够是匿名的，函数声明不能够；

函数声明和函数表达式之间最重要的区别是它们的名称标识符将会绑定在何处；

例子

var a = 2;
(function foo(){ // <-- 添加这一行 
    var a = 3;
    console.log( a ); // 3
})(); // <-- 以及这一行 
console.log( a ); // 2
复制代码

1. 这里的(function foo(){ .. })是一个函数表达式；而不是一 个标准的函数声明； 因此，foo 被绑定在函数表达式自身的函数中而不是所在做用域中。

2. 换句话说，(function foo(){ .. })做为函数表达式意味着foo只能在..所表明的位置中被访问，外部做用域则不行。foo 变量名被隐藏在自身中意味着不会非必要地污染外部做 用域。

3. 当即执行函数表达式：因为foo被包含在一对( )括号内部，所以成为了一个表达式；经过在末尾加上另一个 ( ) 能够当即执行这个函数；即， (function foo(){ .. })()。第一个 ( ) 将函数变成表 达式，第二个 ( ) 执行了这个函数。

4. 还能够穿参数

var a = 2;
(function IIFE( global ) {
    var a = 3;
    console.log( a ); // 3 
    console.log( global.a ); // 2
})( window );
console.log( a ); // 2
复制代码

这样就能够访问外面的a了，由于访问变量a的时候就近原则，就获得了3；

块级做用域

1. { }

var 定义的变量和函数，和在当前块级所处做用域定义没有什么区别； let，const 在块级做用域外面就访问不到；

简单的说{ }这个就造成了一个块级做用域；

例子：

{
    var a = 44;
    let b = 22;
    const c = 33
}
a // 44;
b // Uncaught ReferenceError: b is not defined;找不到引用，报错；
c // Uncaught ReferenceError: c is not defined;找不到引用，报错；
复制代码

2. with

用 with 从对象中建立出的做用域仅在 with 声明中而非外 部做用域中有效。

3. try/catch

JavaScript 的 ES3 规范中规定 try/catch 的 catch 分句会建立一个块做 用域，其中声明的变量仅在 catch 内部有效。

闭包

不管论经过何种手段将内部函数传递到所在的做用域之外，它都会持有对原始定义做用域的引用，不管在何处执行这个函数都会使用闭包。

我的所理解的闭包就是一个做用域，及做用域内的变量和函数的缓存；不会被释放了，以供在从此访问；不得被垃圾回收掉

不知道你们是否还记得JavaScript的垃圾回收机制；

垃圾收集：就是执行完后，对没有引用的变量进行释放；常见手动释放就是设置成null；

例子1

function foo() { 
    var a = 2;
    function bar() { 
        console.log( a );
    }
    return bar; 
}
var baz = foo();
baz(); // 2 —— 朋友，这就是闭包的效果。
复制代码

分析：

1. 函数 bar() 的做用域可以访问 foo() 的内部做用域。 bar() 显然能够被正常执行。而且，它能在本身定义的做用域之外的地方 执行。
2. 在 foo() 执行后，一般会期待foo()的整个内部做用域都被销毁，由于咱们知道引擎有垃圾回收器用来释放再也不使用的内存空间。因为看上去 foo() 的内容不会再被使用，因此很天然地会考虑对其进行回收。
3. 而闭包的“神奇”之处正是能够阻止这件事情的发生。事实上内部做用域依然存在，所以没有被回收。谁在使用这个内部做用域?原来是 bar() 自己在使用。
4. 拜 bar() 所声明的位置所赐，它拥有涵盖foo()内部做用域的闭包，使得该做用域可以一 直存活，以供 bar() 在以后任什么时候间进行引用。

bar() 依然持有对该做用域的引用，而这个引用就叫做闭包。

例子2

function foo() { 
    var a = 2;
    function baz() {
        console.log( a ); // 2
    }
    bar( baz ); 
}
function bar(fn) {
    fn(); // 妈妈快看呀，这就是闭包!
}
foo(); // 2
复制代码

等效以下：

var fn;
function foo() {
    var a = 2;
    function baz() { 
        console.log( a );
    }
    fn = baz; //将baz分配给全局变量 
}
function bar() {
    fn(); // 妈妈快看呀，这就是闭包!
}
foo();
bar(); // 2
复制代码

按正常的做用域思考方式，bar是没有办法访问foo的内部的变量的；

1. 可是foo能够访问外部做用域下的bar；
2. bar在foo内部；
3. 将baz传递给bar的内部，baz不管在哪里都依然持有对foo内部变量的引用；

baz 和 变量a，还有foo造成了一个闭包，这个做用域将被引擎缓存起来；baz随时均可以访问；

function foo(a) { 
    var b = 2;
    // 一些代码
    function bar() {
        // ...
    }
    // 更多的代码 
    var c = 3;
}
foo();
bar(); // 失败
console.log( a, b, c ); // 三个全都失败
复制代码

这种就没法访问foo里面的变量和函数了，由于foo里面都是局部变量，外部没法直接访问，这种里面变量再会被其余地方引用，将会被引擎垃圾回收释放掉。

造成闭包的条件

1. 一个函数foo包含一个函数baz和一个变量a；（名字随意）
2. baz内部存在对a的引用；
3. foo须要被执行；

正确例子示范

function wait(message) {
    setTimeout( function timer() {
        console.log( message );
    }, 1000 ); 
}

wait( "Hello, closure!" );
复制代码

这就是个闭包；

1. timer和message都在wait内部
2. timer对wait的message有引用；
3. wait被执行了

通常来讲，只要使 用了回调函数，实际上就是在使用闭包!

错误例子示范

for (var i=1; i<=5; i++) { 
    (function() {
        setTimeout( function timer() { 
            console.log( i );
        }, i*1000 );
    })();
}
// 打印5次6；
复制代码

这样不行！这只是一个都没有的空做用域。不能造成闭包

修改1：

for (var i=1; i<=5; i++) { 
    (function(j) {
        setTimeout( function timer() { 
            console.log( j );
        }, j*1000 );
    })(i);//从外部传进来
}
复制代码

修改2：

for (let i=1; i<=5; i++) { 
    setTimeout( function timer() {
        console.log( i );
    }, i*1000 );
}
//块做用域和闭包联手即可天下无敌
复制代码

应用——模块

模块有两个主要特征:

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
复制代码

"foo" 和 "bar" 模块经过一个返回公共 API 的函数来定义的。"foo" 甚至接受 "bar" 的 示例做为依赖参数，并能相应地使用它。

总结

最后记住：当函数能够记住并访问所在的做用域，即便函数是在当前做用域以外执行，这时 就产生了闭包。