js闭包理解

闭包相关-变量作用域

//函数内部可以直接读取全局变量，这是因为js的"链式作用域"结构,子对象会向上寻找所有父对象的变量
var msg='app'

function text(){
    return console.log(msg)
}

text()//app

//函数外部不可以直接读取函数内变量
function text(){
    var msg='function'
}

console.log(msg)//msg is not defined

//函数内部的变量设置的时候没有使用变量字段时候，默认是全局变量，此时就会覆盖原有同名的全局变量
var msg='app'

function text(){
    msg='function'
}

text()

console.log(msg)//function

何为闭包

通俗点讲，闭包就是能够读取其他函数内部变量的函数，由于在js只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。

function text(){

　　　　var msg='hello';

　　　　function say(){
　　　　　　console.log(msg);
　　　　}

　　　　return say;

}

var sayHi=text();

sayHi()//hello

//其中sayHi可以访问到text函数中变量，故sayHi为闭包

为什么需要闭包/闭包作用

为什么

我们在开发过程中全局变量的使用是必然的，但是对于全局变量的修改我们却是要格外小心，否则一不小心就会造成全局污染，为了须解决变量污染问题，那就是把变量封装到函数内，让它成为局部变量。但是这个时候就会引出一个问题，函数内的变量是不可被外部访问的，就算每次调用变量所在的函数，变量也会变为初始设置的值，说到这里大家应该了解，闭包就是为了解决这个痛点出现的。

作用

1、隐藏变量，避免全局污染
2、可以读取函数内部的变量

缺点：

1、导致变量不会被垃圾回收机制回收，造成内存消耗。使用闭包时，按照作用域链的特点，闭包（函数）外面的变量不会被销毁，因为函数会一直被调用，所以一直存在，如果闭包使用过多会造成内存销毁。
2、不恰当的使用闭包可能会造成内存泄漏的问题

实现

var num = 0;
function add(){
    var num = 10;
    return function(){
        num++;
        return num;
    };
};
var increas =  add();
console.log(increas());//11
console.log(increas());//12
console.log(increas());//13
console.log(num);//0

//可以看到，我们定义在函数内的num变量不会影响到全局变量num，并且能够起到我们想要的递增的效果

常见闭包

//foo执行1000ms 后，它的内部作用域不会消失，timer函数依然保有 foo 作用域的引用。timer函数就是一个闭包。
//定时器，事件监听器，Ajax请求，跨窗口通信，Web Workers或者其他异步或同步任务中，只要使用回调函数，实际上就是闭包。
function fn1(a) {
    setTimeout(function timer(){
        console.log(a)
    }, 1000)
}
fn1(2);

//函数内部函数调用上一级作用域变量
function fn2() {
    var a = 1; // a 是一个被 fn2 创建的局部变量
    function fn() { // fn 是一个内部函数，是一个闭包
        console.log(a); // 使用了父函数中声明的变量
    }
    return fn();
}
fn2(); // 1

注意

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