关于闭包的3个使用场景与3个坑

关于什么是闭包的问题，我已经被面试官问到了无数次，每次回答都不尽如人意。现在借此机会开启我程序员职业生涯的写博客时代。记录自己日常生活遇到的问题与使用心得与技巧，目的是加深自己的印象，获得新的理解。

函数 A 内部有一个函数 B，函数 B 可以访问到函数 A 中的变量，那么函数 B 就是闭包。

为什么呢？？？

 

我们知道，JS语言是没有块级作用域的，只有函数作用域。当函数内部访问变量时，会先在自己的内部作用域里去寻找，直至没有，然后就会不停向更外层的作用域去寻找，找到则停止，没找到则继续找，直到全局作用域里。（关于为什么是这样，这个要联系堆栈的知识，这里不深作探究）。这样一来，还有一个好处，就是内部函数的变量，外部的函数和全局作用域里的变量访问不到，不会造成变量污染全局环境。（科学性仅供于面试交流）

那好，这样做的好处是？或者有什么应用场景吗？

 

当然有！不然我为什么用他？（或者你可以反问他，平常你打代码需要用到闭包吗？当然不需要，闭包这么难用，我为什么会用到他？）最常使用的地方就是递归调用时。（也就在递归调用时会用到。）

场景一：递归时使用闭包。

问题1：用递归的方法求阶乘

function factorial (num) {
    if (num<=1) {
        return 1;
    }
    return num * factorial(num-1); 
}

（先作个记号，这里还有其他求阶乘使用闭包的方法，待更新）

 

坑一：内存泄漏。比如要为某个元素添加onclick事件的时候。

function showId () {
    var el = document.getElementById('test');
    el.onclick = function () {
        alert(el.id);
    }
}

这样写el.id会造成函数运行完后，无法JS的垃圾回收机制无法回收el，造成内存泄漏。为了避免它，最好改成这样写：

function showId () {
    var el = document.getElementById('test');
    var id = el.id;
    el.onclick = function () {
        alert(id); //这样写会导致id去访问外部函数作用域的id，造成内存泄漏
    }
    el = null;
}

坑2：this的指向问题

var object = {
    name: '对象',
    getName: function () {
        return function (){
            console.log(this.name);
        }
    }
}

object.getName()();//打印啥？

哈哈，居然是undefined。不就是不要看第二个括号，第一个括号结束过后是一个函数，你调用了一个全局函数而已嘛。

坑3：引用的变量可能发生变化。（最常见的，以前分享提到过）

function outer(){
    var result = [];
    for(var i=0;i<10;i++) {
        result[i] = function (){
            alert(i);
        }
    }
    return result;
}
outer().forEach(fun => {
    fun();
});

这样会打印出10个10，而不是0~9，要把他变成立即执行函数才会变成0~9

function outer(){
    var result = [];
    for(var i=0;i<10;i++) {
        result[i] = function (){
            alert(i);
        }(i)
    }
    return result;
}
outer().forEach(fun => {
    fun();
});

场景2：模仿块级作用域

(function () {
    for(var i=0;i<10;i++){
        console.log(i);
    }
})()
alert(i);//这时打出的i是undefined，证明闭包能模拟块级作用域

场景3：循环给dom绑定事件的时候，获取index去打印。（这个用事件委托会更好）