js闭包详解

一、闭包的相关概念

image.png

二、案例解析

function foo(x) {
        var temp = 3;
        return function (y) {
            console.log(x + y + (++temp))
        }
    }
    var bar = foo(2)
    bar(10); //2+3 +11=16
    bar(20);//2+3 +11=27

分析：
1、函数可以作为一个变量返回值
2、bar 变量作为foo函数的返回值，指向的是一个函数
3、虽然foo函数已经执行完，temp变量已经离开了它的定义环境，但是他的内部变量temp被bar一直引用，所以temp不会被释放，导致foo函数的闭包环境一直驻留在内存中。大部分人也认为bar是闭包对象

三、闭包的运用

1、匿名自执行函数（也叫即时函数）模拟块级作用域

var a = 9;
    (function (a) {
        // 块级作用域环境
        console.log(a)//8
    })(8)

2、循环注册dom事件中的index

image.png

3、setTimeOut中的闭包应用

 // 事件循环机制
    // for (var i = 0; i < 100; i++) {
    //     setTimeout(function () {
    //         console.log(i)//100个  100
    //     }, 1000)
    // }

    //闭包的运用
    for (var i = 0; i < 100; i++) {
        (function (a) {
            setTimeout(function () {
                console.log(a)//100个  100
            }, 1000)
        })(i)
    }

4、点击按钮每次累加

// 全局作用域
    var counter = 0;
    function add() {
        return counter += 1;
    }
    console.log(add())//1
    console.log(add())//2
    console.log(add())//3

    // 局部作用域
    // function click() {
    //     var m = 0;
    //     // 块级作用域环境
    //     return function () {
    //         console.log(++m)//每次累加 1
    //     }
    // }

    // var foo = click()
    // foo()//1
    // foo()//2
    // foo()//3

四、闭包的缺点

image.png