JS三座大山之作用域和闭包（2）

作用域

作用域是什么？其实作用域是针对变量的，一个变量在某个区域内起作用，这份区域就是他的作用域。顺便说一句，在 js中没有块级作用域，比如

 if (true) {
    var name = "zhangsan"
}
console.log (name)      // "zhangsan"

学过java等高级语言的同学肯定会说这样写岂不是就报错了，但是在js中，这么写是完全ok的，因为js没有块级作用域，但实际上并不推荐这么写。
在js中，只有函数和全局作用域，比如

var a = 100               
function fn () {
    var a = 200           
    console.log ('fn',a)
}
console.log ('global',a)
fn()

QQ图片20180220211248.png

作用域链

在这里我们讲一个概念：自由变量，即当前作用域没有定义的变量。比如

var a = 100
function fn () {
    var b = 200
    console.log (a)
    console.log (b)
}
fn ()

在console.log (a) 中的a就是自由变量，在当前作用域中并没有定义a，所以要去函数定义时的父级作用域中找。我们再来看一个稍微复杂一点点的例子

var a = 100
function fn () {
    var b = 200
    function fn1 () {
        var c = 300
        console.log (a)
        console.log (b)
        console.log (c)
    }
    fn1 ()
}
fn ()

在执行console.log (a) 时，由于当前作用域没有定义a，所以要去fn在定义时的父级作用域找，此时它的父级作用域是fn，fn中也没有定义a，所以再去fn在定义时的父级作用域（即全局作用域）中找，此时就能找到a。b，c也是同理。上述过程就形成了一条作用域链，简单来说作用域链就是自由变量的查找，子对象会一级一级地向上寻找所有父对象的变量。

闭包

专业说法：当一个内部函数被其外部函数之外的变量引用时，就形成了一个闭包。（对内部函数的引用会添加到外部函数的活动对象上）

还可以这么理解：闭包就是一个具有封闭功能与包裹功能的结构，是为了实现具有私有访问空间的函数的，函数可以构成闭包，因为函数内部定义的数据函数外部无法访问，即函数具有封闭性；函数可以封装代码即具有包裹性，所以函数可以构成闭包。创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量。

而大家普遍认为的闭包是：

;(function fn() {})();

这只是闭包的一种形式而已，也就是闭包的一种应用，这样用闭包的好处是避免变量冲突和污染，能够自动执行；闭包前后最好都要写分号，因为防止多文件集成成一个文件后，高压缩出现语法错误。

闭包有3个特性：
1、函数嵌套函数
2、函数内部可以引用外部的参数和变量

function f1() {
   var n=999;
   function f2() {
       alert(n);    // 999
   }
}

f2被包在函数f1内部，f1内的所有局部变量，对f2都是可见的。反过来就不行，f2内的局部变量，对f1就是不可见的。

3、参数和变量不会被垃圾回收机制回收，让这些变量的值始终保持在内存中。

闭包有什么用，使用场景：
当我们需要在模块中定义一些变量，并希望这些变量一直保存在内存中但又不会“污染”全局的变量时，就可以用闭包来定义这个模块。

使用闭包的注意点：
1、由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2、闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

函数套函数就是闭包吗？
不是！当一个内部函数被其外部函数之外的变量引用时，才会形成了一个闭包。

经典面试题：创建10个a标签，点击时弹出相应的序号

在这里我给大家说两种方法，其中一种就是和我们这篇文章的知识点相关的方法

        var i
        for (var i = 0; i < 10; i++) {
            (function (i) {
                var a = document.createElement("a")
                a.innerHTML = i + "<br>"
                a.addEventListener("click", function (e) {
                    e.preventDefault()
                    alert(i)
                })
                document.body.appendChild(a)
            })(i)
        }

我们把参数 i 作为传给立即执行函数，这样，i 的值就传给了立即执行函数的局部变量 i 了。立即执行函数会直接执行，但是其活动不会销毁，因为里面有个匿名函数。执行后局部变量 i 与全局变量 i 联系就切断了，也就是执行的时候，传进去的变量 i 是多少，立即执行函数的局部变量 i 就是多少，并且该局部变量 i 仍然没有消失，因为匿名函数的存在。

这时候，return中的匿名函数的作用域链中会有两个变量 i。当点击a的时候，它向上搜索 i 的时候，它找到立即执行函数的局部变量 i ，就停止向上查找了，因此最后的结果就不会是全局变量 i 的值10了。

还有一种方法是创建索引值

        var i
        for (var i = 0; i < 10; i++) {
            var a = document.createElement("a")
            a.innerHTML = i + "<br>"
            a.index = i;
            a.addEventListener("click", function (e) {
                e.preventDefault()
                alert(this.index)
            })
            document.body.appendChild(a)
        }