浅谈JavaScript闭包

[xccjk]

闭包

什么是闭包

• 闭包其实就是一个可以访问其它函数内部变量的函数
• 从技术的角度讲，所有的JavaScript函数都是闭包：它们都是对象，它们都关联到作用域链
• 当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行

function foo() {
    var name = 'xcc'
    return function() {
        console.log(name)
    }
}
foo()
var result = foo()
result()    // xcc

什么时候构成闭包

• 闭包产生的本质：当前环境中存在指向父级作用域的引用(案例1)
• 只要父级作用域的引用存在既可(案例2)

案例1中console可以访问到的作用域有func2，func1和window

// 案例1
function foo() {
    var name = 'xcc'
    function func2() {
        console.log(name)
    }
    return func2
}
foo()
var result = foo()
result() 

// 案例2
var func2
function func1() {
    var a = 2
    func2 = function() {
        console.log(a)    // 2
    }
}

作用域链

• 当访问一个变量时，代码解释器会先在当前作用域中查找，如果没有找到，就去父级作用域去查找，知道找到该变量或者不存在于父作用域中，这个链路就是作用域链

查找过程：函数func2内部作用域 -> 函数func1作用域 -> 全局作用域

var a = 1
function func1() {
    var b = 2
    function func2() {
        var c = 3
        console.log(a)    // 1
    }
}

闭包的实现方法

• 在函数内部返回一个函数
• 在定时器、事件监听、ajax请求、web workers或者任何一部中，只要使用了回调函数，实际上就是在使用闭包(案例3)
• 作为函数参数传递的形式(案例4)
• IIFE(立即执行函数)，创建了闭包，保存了全局作用域和当前函数的作用域，因此可以输出全局的变量(案例5)
  • IIFE拥有独立的作用域，不会污染全局作用域

// 案例3
// 定时器
setTimeout(function foo() {
    console.log(1)
}, 1000)
// 事件监听
$('#app').click(function() {
    console.log('event')
})

// 案例4
var a = 1
function foo() {
    var a = 2
    function baz() {
        console.log(a)
    }
    bar(baz)
}

function bar(fn) {
    // 闭包
    fn()
}
foo()

// 案例5
var name = 'xcc'
(function foo() {
    console.log(name)    // xcc
})()

闭包的优缺点

优点

• 局部作用域
• 减少全局变量污染

缺点

• 由于闭包会使一些变量一直保存在内存中不会自动释放，所以如果大量使用的话会消耗大量内存，在IE9之前闭包会导致内存泄漏

经典问题

案例5中，console.log会打印出5个6出来，如果想实现输出1、2、3、4、5、6应该怎么办？

// 案例6
for(var i = 1; i < 6; i++) {
    setTimeout(function () {
     console.log(i)    // 5
    }, 0)
}

• setTimeout为宏任务，由于JavaScript中单线程eventLoop机制，在主线程同步执行完后才会去执行宏任务，因此循环结束后setTimeout中回调才依次执行
• 因为setTimeout函数也是一种闭包，往上找它的父级作用域就是window，变量i为window上的全局变量

IIFE

for(var i = 1; i < 6; i++) {
    (function(j) {
        setTimeout(function () {
         console.log(j)    // 1、2、3、4、5
        }, 0)
    })(i)
}

let块级作用域

for(let i = 1; i < 6; i++) {
    setTimeout(function () {
      console.log(i)    // 1、2、3、4、5
    }, 0)
}

定时器传入第三个参数

for(let i = 1; i < 6; i++) {
    setTimeout(function (j) {
      console.log(j)    // 1、2、3、4、5
    }, 0, i)
}