javascript 闭包详解及简单实例应用
JS 闭包详解及实例：
最近学习JS的基础知识，学习了闭包的知识点，有很多疑惑，这一段时间还是一直有在看闭包的相关知识理解就更深入了一点，下面说说我的理解。
function fn(){
var a = 0;
return function (){
return ++a;
}
}
如上所示，上面第一个return返回的就是一个闭包，那么本质上说闭包就是一个函数。那么返回这个函数有什么用呢？
那是因为这个函数可以调用到它外部的a这个变量。其实也就是说，return返回的是这个函数 + a这个变量
那么，我们现在再来利用这个闭包做点事情
我们不妨创建一个变量 var f = fn(); 我们如果 console.log(f) 一下就知道，这个f就是return的整个函数体，也就是 function () { return ++a;}
那么我们执行f()就相当于执行function函数了，这时，我们多次执行f()的话，返回的a数值就会一直叠加。
但是如果我们现在再创建一个变量 var f2 = fn(); 我们运行f2()的话，会发现，a的值重置了。又会从0开始了。这是为什么呢？
其实我们可以这样理解，首先闭包是一个匿名函数，现在我们将它赋予了一个变量，那么他就有名字了，那么他每次执行完以后就有地方存了。但是每个变量存的地方又不一样，他们相互不关联，所以他们就是独立的个体了，所以a得值就不同了。就当是执行了不同的函数，只是恰好函数体是一样的罢了。
那么，我们闭包的应用场景有什么呢。本来之前我也一直在想，因为我很水，所以我写代码用到闭包的地方并不是很多。但是今天在看前端的设计模式的时候看到了单例模式，想了下，这不就是闭包的一个很好的应用场景么？
比如说我现在的需求是这样的，在网页中有时候会需要遮罩层，调用的时候我就创建一个，但是你不可能每次调用创建吧，所以如果存在就用以前的，如果不存在就创建新的，但同时有可能我永远都不需要这个遮罩层，所以我也有可能一直都不需要创建。
这就是一个很典型的单例模式的场景。
那么我们怎么来实现呢。
function fn() {
var a;
return function() {
return a || (a = document.body.appendChild(document.createElement('div')));
}
};
var f = fn();
f();
就很简单，就是之前的代码稍微改动下就可以了。相关理解也在上面说的很清楚啦，可以仔细看看应该是能明白的。
好了，现在对闭包算是有了一点点深入的理解了。接下来还是要继续慢慢的深入，博主也会及时更新的。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
这篇文章主要介绍了JavaScript中如何对多维数组(矩阵)去重的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要帮助大家简单实现JavaScript弹幕效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
在开发后台管理系统时，常常会涉及到各种树状结构的数据处理逻辑，例如：增，删，改，查等。而树状结构的处理就没有数组那么的直观。本文为大家总结了JS树状结构的数据处理的方法，需要的可以参考下2022-07-07
这篇文章主要为大家介绍了如何通过JavaScript模拟实现京东的快递单号查询效果，文中的示例代码讲解详细，感兴趣的小伙伴可以动手试一试2022-03-03
这篇文章主要介绍了JS运动特效之同时运动实现方法,结合实例形式分析了javascript同时运动的原理与相关实现技巧,需要的朋友可以参考下2018-01-01
这篇文章主要介绍了JS实现简单表格排序操作,结合具体实例形式分析了JavaScript事件响应及table表格动态操作相关技巧,需要的朋友可以参考下2017-10-10
这篇文章主要为大家介绍了axios/fetch实现stream流式请求示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-09-09
el-table el-table-column表头嵌套循环数据的示例代码
本文介绍了使用两个数组来实现el-table中表头的嵌套循环,一个数组用于循环表格数据,另一个用于循环表头,帮助读者更好地理解和应用表头嵌套功能,感兴趣的朋友跟随小编一起看看吧2024-09-09
本文主要介绍了JS实现随机生成字符串(可指定长度)的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-08-08
这篇文章主要介绍了JavaScript中调用函数的4种方式代码实例,本文分别给出方法调用模式、函数调用模式、构造器调用模式、apply调用模式4种方式的代码实例,需要的朋友可以参考下2015-07-07
最新评论