什么是闭包？闭包产生的原因以及闭包有哪些表现形式

时间：2025-01-19 08:38:26

闭包的定义： 

JavaScript红宝书上对于闭包的定义：闭包是指有权访问另外一个函数作用域中的变量的函数，

MDN 对闭包的定义为：闭包是指那些能够访问*变量的函数。

（其中*变量，指在函数中使用的，但既不是函数参数arguments也不是函数的局部变量的变量，其实就是另外一个函数作用域中的变量。）

闭包产生的原因：

首先要明白作用域链的概念，其实很简单，在ES5中只存在两种作用域————全局作用域和函数作用 域，当访问一个变量时，解释器会首先在当前作用域查找标示符，如果没有找到，就去父作用域找，直 到找到该变量的标示符或者不在父作用域中，这就是作用域链，值得注意的是，每一个子函数都会拷贝 上级的作用域，形成一个作用域的链条。 比如: 

var a = 1;
function f1() {
    var a = 2
    function f2() {
        var a = 3;
        (a);//3
    }
}

在这段代码中，f1 的作用域指向有全局作用域(window)和它本身，而 f2 的作用域指向全局作用域 (window)、f1 和它本身。而且作用域是从最底层向上找，直到找到全局作用域 window 为止，如果全局 还没有的话就会报错。就这么简单一件事情！

闭包产生的本质就是，当前环境中存在指向父级作用域的引用。还是举上面的例子: 

function f1() {
    var a = 2
    function f2() {
        (a);//2
}
return f2;
}
var x = f1();
x();

这里 x 会拿到父级作用域中的变量，输出2。因为在当前环境中，含有对 f2 的引用，f2 恰恰引用了 window、f1 和 f2 的作用域。因此 f2 可以访问到f1的作用域的变量。

那是不是只有返回函数才算是产生了闭包呢？

 回到闭包的本质，我们只需要让父级作用域的引用存在即可，因此我们还可以这么做： 

var f3;
function f1() {
    var a = 2
    f3 = function() {
        (a);
    }
}
f1();
f3();

让 f1 执行，给 f3 赋值后，等于说现在 f3 拥有了 window、f1 和 f3 本身这几个作用域的访问权限，还是自底 向上查找，最近是在 f1 中找到了 a,因此输出 2。

在这里是外面的变量 f3 存在着父级作用域的引用，因此产生了闭包，形式变了，本质没有改变。 

闭包有哪些表现形式：

1）返回一个函数。刚刚已经举例。

2）作为函数参数传递

var a = 1;
function foo(){
    var a = 2;
    function baz(){
        (a);
    }
bar(baz);
}
function bar(fn){
    // 这就是闭包
    fn();
}
    // 输出2，而不是1
foo();

3）在定时器、事件监听、Ajax请求、跨窗口通信、Web Workers 或者任何异步中，只要使用了回调函 数，实际上就是在使用闭包。 以下的闭包保存的仅仅是window和当前作用域。

    // 定时器
setTimeout(function timeHandler(){
    ('111');
}，100)
    // 事件监听
$('#app').click(function(){
    ('DOM Listener');
})

4）IIFE(立即执行函数表达式)创建闭包, 保存了 全局作用域 window 和当前函数的作用域 ，因此可以全局的变量。

var a = 2;
(function IIFE(){
    // 输出2
    (a);
})();

 

相关文章