javascript之闭包理解以及应用场景

1 function fn(){2    var a = 0;3    return function (){4         return ++a;5    }
6 }

如上所示，上面第一个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得值就不同了。就当是执行了不同的函数，只是恰好函数体是一样的罢了。

非常感谢这篇博文提供的思路

那么，我们闭包的应用场景有什么呢。本来之前我也一直在想，因为我很水，所以我写代码用到闭包的地方并不是很多。但是今天在看前端的设计模式的时候看到了单例模式，想了下，这不就是闭包的一个很好的应用场景么？

比如说我现在的需求是这样的，在网页中有时候会需要遮罩层，调用的时候我就创建一个，但是你不可能每次调用创建吧，所以如果存在就用以前的，如果不存在就创建新的，但同时有可能我永远都不需要这个遮罩层，所以我也有可能一直都不需要创建。

这就是一个很典型的单例模式的场景。

那么我们怎么来实现呢。

1 function fn() {2     var a;3     return function() {4         return a || (a = document.body.appendChild(document.createElement('div')));5     }6 };7 var f = fn();8 f();

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

转载于:https://blog.51cto.com/12942149/1929370

javascript之闭包理解以及应用场景相关推荐

深入理解javascript的闭包
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域 ...
深入理解JavaScript的闭包特性如何给循环中的对象添加事件
初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...
js闭包的理解及应用场景
函数的声明与执行函数定义阶段 1.会在堆内存中开辟一个存储空间把函数体放在这个空间里函数中的所有变量不解析 2.把这个空间地址赋值给函数名然后储存在栈内存中函数调用阶段 1.根据函数名找到对 ...
了解js基础知识中的作用域和闭包以及闭包的一些应用场景，浅析函数柯里化
js基础知识中的作用域和闭包一.作用域 1.作用域.自由变量简介 (1)作用域定义 (2)作用域实例演示 (3)自由变量定义 (4)自由变量实例演示 2.作用域链简介 (1)作用域链定义 (2)作用 ...
mysql闭包的概念_彻底搞懂JavaScript的闭包、防抖跟节流
最近出去面试了一下,收获颇多!!! 以前的我,追求实际,比较追求实用价值,然而最近面试,传说中的面试造火箭,工作拧螺丝,竟然被我遇到了.虽然很多知识点在实际工作中并不经常用到,但人家就是靠这个来筛选人 ...
javascript之异步操作理解---回调函数，async，await以及promise对象
javascript之异步操作理解---回调函数,async,await以及promise对象概述概述写在前面:虽然平时做项目,但是发现自己写的代码还是很烂.最近接触了一个对性能要求比较高的项目 ...
我对javascript对象的理解
前言 JavaScript这门语言除了基本类型都是对象,可以说JavaScript核心就是对象,因此理解JavaScript对象及其种种特性至关重要,这是内功.本文介绍了我对es5对象,原型, 原型链 ...
【Javascript】深入理解this作用域问题以及new/let/var/const对this作用域的影响
理解this作用域 <javascript高级程序设计>中有说到: this对象是在运行时基于函数的执行环境绑定的:在全局函数中,this等于window,而当函数被作为某个对象调用时,t ...
JavaScript之全面理解面向对象的JS
今天看到一篇文章写得很好,对于像博主这种js一般级别的菜鸟很有帮助,博主秉着"好文要转"的原则收藏了这篇文章,简单排了下版,分享给大家,本文转自原文:http://www.ibm. ...

javascript之闭包理解以及应用场景

javascript之闭包理解以及应用场景相关推荐

最新文章

热门文章