简谈JavaScript闭包

闭包是什么

• 第一种说法：闭包建立一个词法做用域，这个做用域里面的变量被引用以后能够在这个词法做用域外面被自由访问，是一个函数和声明该函数的词法环境的组合
• 第二种说法：闭包就是引用了自由变量的函数，这个自由变量与函数一同存在，即便脱离了建立它的环境。因此常常看到的说闭包就是绑定了上下文环境的函数。
• 我更偏向于闭包是一个函数和声明该函数的词法环境的组合。

JS里面的闭包

先上一个闭包

function sayHello(name){
    let str = 'Hello,${name}';
    function say(){
        console.log(str);
    }
    return say;
}

let myHello = sayHello('abby');
myHello();

该例子的解释

上面的代码，在sayHello函数里面定义的say函数和这个函数声明的词法环境就造成了一个闭包。say函数引用了sayHello函数里面定义的一个变量str，而且sayHello函数将say这个函数return了出去，这样，在sayHello函数的外面也能访问到它词法做用域里面的变量str，最后就像say这个函数和str这个变量绑定了同样

为何在外部还能访问到变量str呢？

• 在一些语言中，通常认为函数的局部变量只在函数的执行期间能够访问
• 当上段代码在执行到let myHello = sayHello('abby');这段代码的时候，按理会销毁掉sayHello这个函数的执行环境，可是在这里却没有，由于，sayHello这个函数返回的是一个函数，这个函数里面的str引用了外部的变量str，若是销毁了sayHello的执行环境就会找不到了，因此，sayHello的执行环境会一直在内存中，因此也就会有闭包会增长内存开销的说法

体会

• 在JavaScript语言中，只有函数内部的子函数才能读取内部变量，能够把闭包简单理解成“定义在一个函数内部的函数”
• 闭包就是将函数内部和函数外部链接起来的一座桥梁

闭包的用处

一、读取函数内部的变量

二、让这些变量始终保持在内存中

function createIncrementor(start) {
    return function () {
        return start++;
    };
}
var inc = createIncrementor(5);
inc() // 5
inc() // 6
inc() // 7

start是函数createIncrementor的内部变量，经过闭包，start的状态被保留了，每一次调用都是在上一次调用的基础上进行计算，闭包inc使得函数createIncrementor的内部环境一直存在，由于inc始终存在内存中，而inc的存在依赖于createIncrementor，所以该函数不会在调用结束后，被垃圾回收机制回收

三、封装对象的私有属性和私有方法

function Person(name) {
    var _age;
    function setAge(n) {
        _age = n;
    }
    function getAge() {
        return _age;
    }
    return {
        name: name,
        getAge: getAge,
        setAge: setAge
    };
}

var p1 = Person("xiaoming");
p1.setAge(25);
pa.getAge(); //25

函数Person的内部变量_age，经过闭包getAge和setAge，变成了返回对象p1的私有变量，外层函数每次运行，都会产生一个新的闭包，而这个闭包又会保留外层函数的内部变量，内存也就消耗较多

在举几个例子

一、常见的闭包都是return出来一个函数，但并非说明，闭包必定须要return一个函数，return一个函数也只是为了能在做用域范围以外访问一个变量

let say;
function sayHello(name){
    let str = 'Hello,${name}';
    say = function(){
        console.log(str);
    }
}

let myHello = sayHello('abby');
say();

二、同一个调用函数生成同一个闭包环境，在里面声明的全部函数同时具备这个环境里面的变量的引用

let get,up,down
function setUp(){
    let number = 20;
    get = function(){
        console.log(number);
    }
    up = function(){
        number += 3;
    }
    down = function(){
        number -= 2;
    }
}

setUp();
get();
up();
down();
get();

三、每个调用函数都会建立不一样的闭包环境，里面的变量互不影响

function newClosure(){
    let array = [1,2];
    return function(num){
        array.push(num);
        console.log('array:${array}');
    }
}

let myClosure = newClosure();
let yourClosure = newClosure();
myClosure(3);
yourClosure(4);
myClosure(5);

四、在循环里面建立闭包

function newClosure(){
    for(var i=0;i<5;i++){
        setTimeout(function(){
            console.log(i);
        });
    }
}

newClosure();//5个5

改进方法一：建立一个新的闭包对象，这样每一个闭包对象里面的变量就互不影响

function log(i){
    return function(){
        console.log(i);
    }
}

function newClosure(){
    for(var i=0;i<5;i++){
        setTimeout(log(i));
    }
}
newClosure();

每次log(i)都会建立不一样的闭包对象，全部的回调函数不会指向同一个环境

改进方法二：使用自执行函数，外部的匿名函数会当即执行，而且把i做为它的参数，此时函数内变量e就拥有了i的一个拷贝。当传递给setTimeout的匿名函数执行时，它就拥有了对e的引用，而这个值是不会被循环改变的

function newClosure(){
    for(var i=0;i<5;i++){
        (function(e){
            setTimeout(function(){
                console.log(e);
            });
        })(i)
    }
}

newClosure();