闭包

2021-01-02 本文已影响0人娃哈哈喜之郎

闭包的定义

闭包有两个部分组成，一个函数，一个该函数外部作用域（词法环境）的引用。闭包实现内部函数有权访问外部函数的作用域。

创建闭包的常见方式

在一个函数内部创建另一个函数

function foo() {
    var msg = "hello world";
    return function () {
        console.log(msg);
    };
}
var bar = foo();
bar();

在匿名函数从 foo() 执行返回后，它的作用域链被初始化为包含了 foo 函数作用域和全局作用域。

通过断点调试，观察刚执行完 foo() 之后，bar 函数的作用域链。

通过下图可以看出，bar 函数包含了 foo 函数作用域和全局作用域，驻留在内存里。

接着往下执行 bar()，观察闭包函数内部可访问的作用域

通过下图可以看出，在执行 bar() 函数内部可以访问的作用域，包含三个，bar 函数局部作用域，foo 函数作用域，全局作用域。

解除对匿名函数的引用，以便释放内存，通过将 bar 设置为 null，等于通知垃圾回收例程将其清除。

bar = null;

闭包的用途

私有变量

var person = function () {
    var name = 'default';
    return {
        getName: function () {
            return name;
        },
        setName: function (newName) {
            name = newName;
        }
    }
}();

函数式编程

function curry(fn) {
    const args = []
    return function inner(arg) {
        if (args.length === fn.length) return fn(...args)
        args.push(arg)
        return inner
    }
}

function add(a, b) {
    return a + b
}

const curriedAdd = curry(add)
console.log(curriedAdd(2)(3)())

模块化

let namespace = {};

(function foo(n) {
    let numbers = []
    function format(n) {
        return Math.trunc(n)
    }
    function tick() {
        numbers.push(Math.random() * 100)
    }
    function toString() {
        return numbers.map(format)
    }
    n.counter = {
        tick,
        toString
    }
}(namespace))

const counter = namespace.counter
counter.tick()
counter.tick()
console.log(counter.toString())

闭包的优缺点

优点：可以避免全局变量的污染。

缺点：由于闭包会携带包含它的函数的作用域，因此会比其他函数占用更多的内存。

闭包常见的面试题

执行以下代码，控制台打印的结果是什么，如何实现每次循环的打印出正确的数字 0 到 5

for (var i = 0; i <= 5; i++) {
    setTimeout(function () {
        console.log(i);
    }, i * 1000);
}

这里的 i 其实是个全局变量，因为 for (var i = 0; i <= 5; i++) {}，等价于 var i; for(i = 0; i <= 5; i++) {}，另外 setTimeout 是异步任务，其中的函数在执行时，全局变量 i 的值已经变成了 6，所以最终的打印结果如下：

实现每次循环的打印出正确的数字 0 到 5 的三种方式

第一种，使用闭包，结合 IIFE （立即调用函数表达式）

IIFE （立即调用函数表达式），在定义时就会立即执行，格式如下：

(function () {
    statements
})();

最终修改后的代码，如下：

for (var i = 0; i <= 5; i++) {
    (function (j) {
        setTimeout(function () {
            console.log(j);
        }, i * 1000);
    })(i)
}

第二种，使用 let 的块级作用域

ES5 只有全局作用域和函数作用域，ES6 新增了 let 命令声明变量，其申明的变量，只在 let 命令所在的代码块内有效，意味着块级作用域。

块级作用域的出现，实际上使得获得广泛应用的 IIFE （立即调用函数表达式）不再必要了。

for (let i = 0; i <= 5; i++) {
    setTimeout(function () {
        console.log(i);
    }, i * 1000);
}

第三种，setTimeout 支持给函数传参

setTimeout 的语法如下，其中，arg1, arg2, ... 作为附加参数，一旦定时器到期，它们会作为参数传递给 function

setTimeout(function[, delay, arg1, arg2, ...]);

修改后的代码，如下

for (var i = 0; i <= 5; i++) {
    setTimeout(function (j) {
        console.log(j);
    }, i * 1000, i);
}

闭包