javascript 闭包详解及简单实例应用

所属分类: 网络编程 / JavaScript 阅读数: 1560
收藏 0 赞 0 分享

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();

就很简单,就是之前的代码稍微改动下就可以了。相关理解也在上面说的很清楚啦,可以仔细看看应该是能明白的。

好了,现在对闭包算是有了一点点深入的理解了。接下来还是要继续慢慢的深入,博主也会及时更新的。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return,需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式:由ECMA-262规范定义的JavaScript标准,对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现(同步与异步)

这篇文章主要介绍了JS分页的实现(同步与异步),需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
收藏 0 赞 0 分享
查看更多