【javascript基础】由demo来进阶学习闭包等概念

最新推荐文章于 2021-02-22 23:16:25 发布

码匠2016

最新推荐文章于 2021-02-22 23:16:25 发布

阅读量422

点赞数

CC 4.0 BY-SA版权

分类专栏： web开发

本文链接：https://blog.youkuaiyun.com/xude1985/article/details/71330526

web开发专栏收录该内容

2 篇文章

订阅专栏

本文深入浅出地介绍了JavaScript中的闭包概念，包括闭包的基本定义、特性及其应用场景。通过具体的代码示例，展示了如何利用闭包来模拟私有变量和方法，并探讨了闭包在循环中的常见问题及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Demo 1：闭包初识

这里写图片描述

先要认识几点现实：

函数外部无法访问函数内部的局部变量。
函数内的嵌套函数可以访问函数的局部变量
将嵌套函数作为闭包返回到外部空间，外部空间通过执行返回的嵌套函数可以实现外部空间对函数内部局部变量的间接访问。

关于闭包的定义及特殊性

函数在创建它的环境之外执行，那么它就是闭包。

如上例子中，函数displayName 如果在创建它的环境中：makeFunc函数内执行，则不叫闭包了。

闭包会记住创建它的环境。创建它的环境包含所在环境的局部变量，这也就是说为什么闭包能够使得外部空间访问到函数的局部变量的原因，同时也是发生内存泄漏的导火索。

Demo 2 : 返回闭包——函数工厂

这里写图片描述
上面的例子我们认识到:
* function可以不用写方法名。
* 两次对makeAdder的调用，虽然是同一makeAdder函数，但是对于返回的闭包来说，创建闭包的环境是二者是独立的，没有瓜葛。

Demo 3:闭包使用场景之：模拟私有方法

var counter=(function() {
    var privateCounter=0;
    function changeBy(val) {
        privateCounter += val;
    }

    return {
        increment:function() {
            changeBy(1);
        },

        decrement:function() {
            changeBy(-1);
        },

        value:function() {
            return privateCounter;
        }
    }
})();

咋一看，看不懂，那么像剥洋葱一样一层层的解析：

第一层: （function() {….}）()

我可以如此改写一下：

var makeCounter = function() {
    var privateCounter=0;
    function changeBy(val) {
        privateCounter += val;
    }

    return {
        increment:function() {
            changeBy(1);
        },

        decrement:function() {
            changeBy(-1);
        },

        value:function() {
            return privateCounter;
        }
    }
}

var counter = makeCounter();

为什么难看懂呢？就是因为将上面两步合成了一步。使用句式是：

（function() {....}）()

定义闭包和执行闭包一块做了，确实奇特！

其他类似的例子

(function(global) {
    var env = global;
    (function(destroyInstance) {
        destroyInstance( % s)
    })(env.destroyInstance)
})(this)

第二层深入闭包内部

关注一下闭包的返回:

return {
        increment:function() {
            changeBy(1);
        },

        decrement:function() {
            changeBy(-1);
        },

        value:function() {
            return privateCounter;
        }
    }