闭包及其使用场景

原文链接：https://github.com/FIGHTING-TOP/FE-knowlodge-base

 

闭包定义

可以通过内层函数访问外层函数的作用域的组合叫做闭包。

 

闭包原理

函数执行分成两个阶段(预编译阶段和执行阶段)。

• 在预编译阶段，如果发现内部函数使用了外部函数的变量，则会在内存中创建一个“闭包”对象并保存对应变量值，如果已存在“闭包”，则只需要增加对应属性值即可。
• 执行完后，函数执行上下文会被销毁，函数对“闭包”对象的引用也会被销毁，但其内部函数还持用该“闭包”的引用，所以内部函数可以继续使用“外部函数”中的变量

利用了函数作用域链的特性，一个函数内部定义的函数会将包含外部函数的活动对象添加到它的作用域链中，函数执行完毕，其执行作用域链销毁，但因内部函数的作用域链仍然在引用这个活动对象，所以其活动对象不会被销毁，直到内部函数被烧毁后才被销毁。

优点

1. 可以从内部函数访问外部函数的作用域中的变量，且访问到的变量长期驻扎在内存中，可供之后使用
2. 避免变量污染全局
3. 把变量存到独立的作用域，作为私有成员存在

缺点

1. 对内存消耗有负面影响。因内部函数保存了对外部变量的引用，导致无法被垃圾回收，增大内存使用量，所以使用不当会导致内存泄漏
2. 对处理速度具有负面影响。闭包的层级决定了引用的外部变量在查找时经过的作用域链长度
3. 可能获取到意外的值(captured value)

 

闭包使用场景

使用闭包来实现防抖

function debounce(callback, time) {
    var timer;
    return function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            callback()
        }, time)
    }
}

window.onresize = debounce(() => {console.log(666)},500)

　　

使用闭包设计单例模式

class Car{
    constructor(color){
        this.color = color
    }
}
var proxy = (function createCar() {
    var instance;
    return function (color) {
        if (!instance) {
            instance = new Car(color)
        }
        return instance
    }
})()
var car = proxy('white')

　　

使用闭包遍历取索引值（古老的问题）

for (var i = 0; i < 10; i++) {
    setTimeout(function(){console.log(i)},0) //10个10
}


for (var i = 0; i < 10; i++) {
    (function(j){
        setTimeout(function(){console.log(j)},0) // 0 - 9
    })(i)
}

　　

闭包性能

因为闭包会使外层函数作用域中的变量被保存在内存中不被回收，所以如果滥用闭包就会导致性能问题，谨记。

 

Reference

• HTML Standard