闭包及其使用场景

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

闭包定义

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

闭包使用场景

使用闭包来实现防抖

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