闭包的理解

最新推荐文章于 2025-01-14 11:25:34 发布

原创最新推荐文章于 2025-01-14 11:25:34 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

23 篇文章

订阅专栏

本文详细解析了JavaScript中闭包的概念及其应用场景，包括循环与闭包的常见问题、模块模式中的闭包应用以及单例模式的实现。通过具体示例说明了闭包如何帮助函数在定义的作用域之外被调用，解决了变量作用域问题。

function foo() {
    var a = 2;

    function bar() {
        console.log( a )；
}

    return bar;
}

var baz = foo();
baz();

在foo执行完毕后，将返回值bar赋值给baz,使得bar能在自己的词法作用域之外执行。

通常情况下，foo执行后，引擎会考虑释放foo的内存空间，但因为bar在foo内部，所以该作用域可以存活，bar()依然拥有该作用域的引用，而这个引用就叫做闭包。

闭包使函数能够在定义的作用域之外被调用。

循环与闭包

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

你以为是输出1，2，3，4，5

？？？

然而

延迟1秒之后，循环早就结束了，退出循环的时候i=6，因为这几次的i实际上都是1个作用域中的i,所以输出5个6

下面是正确的写法

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

循环里面有立即执行函数，函数本身形成了自己的作用域，每一次循环的时候都产生了不同的作用域，其内部timer函数产生了闭包作用域，使得能在循环结束之后进行回调，输出各自作用域中的j，这次就是1,2,3,4,5了

其实在javascript,闭包是广泛存在的，回调函数就是一个典型的例子，有回调函数必有闭包。

es6中有了let之后，就没有类似的问题了，不得不说js早期的设计其实还是存在一些缺陷的，但这门语言现在已经越发强大了

模块与闭包

function CoolModule() {
    var something = "cool";
    var another = [1,2,3];
    function doSomething() {
       console.log(something); 
    }
    function doAnother() {
        console.log(another.join(" ! "));
    }
    
    return {
        doSomething: doSomething,
        doAnother: doAnother
    };
}

var foo = CoolModule(); //通过调用CoolModule,内部作用域和闭包被创建

foo.dosomething();
foo.doAnthoer();

CoolModule函数通过返回一个对象，将自身的doSomething函数和doAnother函数暴露出来，在模块的外部也可以使用这两个函数。doSomething和doAnother函数拥有涵盖模块内部作用域的闭包。

单例模式

直接将CoolModule立即执行并且将返回值赋给foo,CoolModule被销毁之后只有foo一个实例