JavaScript 中闭包的详解

longshengwang 发布于2019-08-20 15:18 / 669人阅读

摘要：局部变量，当定义该变量的函数调用结束时，该变量就会被垃圾回收机制回收而销毁。如果在函数中不使用匿名函数创建闭包，而是通过引用一个外部函数，也不会出现循环引用的问题。

闭包是什么

在 JavaScript 中，闭包是一个让人很难弄懂的概念。ECMAScript 中给闭包的定义是：闭包，指的是词法表示包括不被计算的变量的函数，也就是说，函数可以使用函数之外定义的变量。

是不是看完这个定义感觉更加懵逼了？别急，我们来分析一下。

闭包是一个函数

闭包可以使用在它外面定义的变量

闭包存在定义该变量的作用域中

好像有点清晰了，但是使用在它外面定义的变量是什么意思，我们先来看看变量作用域。

变量作用域

变量可分为全局变量和局部变量。全局变量的作用域就是全局性的，在 js 的任何地方都可以使用全局变量。在函数中使用 var 关键字声明变量，这时的变量即是局部变量，它的作用域只在声明该变量的函数内，在函数外面是访问不到该变量的。

var func = function(){
    var a = "linxin";
    console.log(a);         // linxin
}
func();
console.log(a);             // Uncaught ReferenceError: a is not defined

作用域相对比较简单，我们不多讲，来看看跟闭包关系比较大的变量生存周期。

变量生存周期

全局变量，生命周期是永久的。局部变量，当定义该变量的函数调用结束时，该变量就会被垃圾回收机制回收而销毁。再次调用该函数时又会重新定义了一个新变量。

var func = function(){
    var a = "linxin";
    console.log(a);
}
func();

a 为局部变量，在 func 调用完之后，a 就会被销毁了。

var func = function(){
    var a = "linxin";
    var func1 = function(){
        a += " a";
        console.log(a);
    }
    return func1;
}
var func2 = func();
func2();                    // linxin a
func2();                    // linxin a a
func2();                    // linxin a a a

可以看出，在第一次调用完 func2 之后，func 中的变量 a 变成 "linxin a"，而没有被销毁。因为此时 func1 形成了一个闭包，导致了 a 的生命周期延续了。

这下子闭包就比较明朗了。

闭包是一个函数，比如上面的 func1 函数

闭包使用其他函数定义的变量，使其不被销毁。比如上面 func1 调用了变量 a

闭包存在定义该变量的作用域中，变量 a 存在 func 的作用域中，那么 func1 也必然存在这个作用域中。

现在可以说，满足这三个条件的就是闭包了。

下面我们通过一个简单而又经典的例子来进一步熟悉闭包。

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

我们可能会简单的以为控制台会打印出 0 1 2 3，可事实却打印出了 4 4 4 4，这又是为什么呢？我们发现，setTimeout 函数时异步的，等到函数执行时，for循环已经结束了，此时的 i 的值为 4，所以 function() { console.log(i) } 去找变量 i，只能拿到 4。

我们想起上一个例子中，闭包使 a 变量的值被保存起来了，那么这里我们也可以用闭包把 0 1 2 3 保存起来。

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

当 i=0 时，把 0 作为参数传进匿名函数中，此时 function(i){} 此匿名函数中的 i 的值为 0，等到 setTimeout 执行时顺着外层去找 i，这时就能拿到 0。如此循环，就能拿到想要的 0 1 2 3。

内存管理

在闭包中调用局部变量，会导致这个局部变量无法及时被销毁，相当于全局变量一样会一直占用着内存。如果需要回收这些变量占用的内存，可以手动将变量设置为null。

然而在使用闭包的过程中，比较容易形成 JavaScript 对象和 DOM 对象的循环引用，就有可能造成内存泄露。这是因为浏览器的垃圾回收机制中，如果两个对象之间形成了循环引用，那么它们都无法被回收。

function func() {
    var test = document.getElementById("test");
    test.onclick = function () {
        console.log("hello world");
    }
}

在上面例子中，func 函数中用匿名函数创建了一个闭包。变量 test 是 JavaScript 对象，引用了 id 为 test 的 DOM 对象，DOM 对象的 onclick 属性又引用了闭包，而闭包又可以调用 test ，因而形成了循环引用，导致两个对象都无法被回收。要解决这个问题，只需要把循环引用中的变量设为 null 即可。

function func() {
    var test = document.getElementById("test");
    test.onclick = function () {
        console.log("hello world");
    }
    test = null;
}

如果在 func 函数中不使用匿名函数创建闭包，而是通过引用一个外部函数，也不会出现循环引用的问题。

function func() {
    var test = document.getElementById("test");
    test.onclick = funcTest;
}
function funcTest(){
    console.log("hello world");
}

更多文章：lin-xin/blog

服务器托管私有云 javascript闭包详解 javascript中this详解闭包详解 javascript闭包

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82150.html

闭包详解一

摘要：再看一段代码这样就清晰地展示了闭包的词法作用域能访问的作用域将当做一个值返回执行后，将的引用赋值给执行，输出了变量我们知道通过引用的关系，就是函数本身。在正式学习闭包之前，请各位同学一定要确保自己对词法作用域已经非常的熟悉了，如果对词法作用域还不够熟悉的话，可以先看：深入理解闭包之前置知识---作用域与词法作用域前言现在去面试前端开发的岗位，如果你的面试官也是个前端，并且不是太...

cnio 2019-08-22 17:32 评论0 收藏0
详解js闭包

摘要：但闭包的情况不同嵌套函数的闭包执行后，，然后还在被回收闭包会使变量始终保存在内存中，如果不当使用会增大内存消耗。每个函数，不论多深，都可以认为是全局的子作用域，可以理解为闭包。闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。闭包的特性闭包有三个特性： 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数和变量不会...

Chiclaim 2019-08-21 12:27 评论0 收藏0
Javascript 闭包详解

摘要：一般函数执行完毕，局部活动对象就会被销毁，内存中仅仅保存全局作用域，但是闭包会长期驻扎在内存。我只是想通过这两个例子来说明闭包的用处和好处。闭包会使变量始终保存在内存中，如果使用不当会增大内存消耗。闭包特性函数嵌套函数函数内部可以引用外部的参数和变量参数和变量不会被垃圾回收机制回收闭包的作用具体作用是有权访问函数内部的变量，最常见的就是函数内部创建另一个函数，通过另一个函数...

ztyzz 2019-08-23 14:36 评论0 收藏0
闭包全面详解

摘要：环境由闭包创建时在作用域中的任何局部变量组成。严格来说，闭包需要满足三个条件访问所在作用域函数嵌套在所在作用域外被调用闭包的形成原理先了解的垃圾回收机制会找出不再使用的变量，不再使用意味着这个变量生命周期的结束。什么是闭包最原始定义闭包(closure)，是指函数变量可以保存在函数作用域内，因此看起来是函数将变量包裹了起来。 //根据定义，包含变量的函数就是闭包 function...

qylost 2019-08-26 10:38 评论0 收藏0
JavaScript深入浅出

摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

blair 2019-08-21 18:26 评论0 收藏0