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

2024-04-19 23:37:19

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的闭包及应用

闭包真的是学过一遍又一遍,Js博大精深,每次学习都感觉有新的收获.相信在大家封装前端插件时,闭包是必不可少的.闭包的真正好处我个人认为除了封装还是封装,能带个我们私有方法,和调用上的灵活方便,也会使你的代码对外的对象保持干净整洁. 进入正题维基百科这样定义了JS闭包:在计算机科学中,闭包(英语:Closure),又称词法闭包(Lexical Closure)或函数闭包(function closures),是引用了自由变量的函数.这个被引用的自由变量将和这个函数一同存在,即使已经离开了创造它的
一分钟理解js闭包

什么是闭包? 先看一段代码: function a(){ var n = 0; function inc() { n++; console.log(n); } inc(); inc(); } a(); //控制台输出1,再输出2 简单吧.再来看一段代码: function a(){ var n = 0; this.inc = function () { n++; console.log(n); }; } var c = new a(); c.inc(); //控制台输出1 c.inc(); //
JavaScript 匿名函数（anonymous function）与闭包（closure）

引入匿名函数闭包变量作用域函数外部访问函数内部的局部变量用闭包实现私有成员引入闭包是用匿名函数来实现.闭包就是一个受到保护的变量空间,由内嵌函数生成."保护变量"的思想在几乎所有的编程语言中都能看到. 先看下 JavaScript 作用域: JavaScript 具有函数级的作用域.这意味着,不能在函数外部访问定义在函数内部的变量. JavaScript 的作用域又是词法性质的(lexically scoped).这意味着,函数运行在定义它的作用域中,而不是在调用它的作用
JavaScript利用闭包实现模块化

利用闭包的强大威力,但从表面上看,它们似乎与回调无关.下面一起来研究其中最强大的一个:模块. function foo() { var something = "cool"; var another = [1, 2, 3]; function doSomething() { console.log( something ); } function doAnother() { console.log( another.join( " ! " ) ); } } 正如在这
前端开发必须知道的JS之闭包及应用

在前端开发必须知道的JS之原型和继承一文中说过下面写篇闭包,加之最近越来越发现需要加强我的闭包应用能力,所以此文不能再拖了.本文讲的是函数闭包,不涉及对象闭包(如用with实现).如果你觉得我说的有偏差,欢迎拍砖,欢迎指教.一. 闭包的理论首先必须了解以下几个概念: 执行环境每调用一个函数时(执行函数时),系统会为该函数创建一个封闭的局部的运行环境,即该函数的执行环境.函数总是在自己的执行环境中执行,如读写局部变量.函数参数.运行内部逻辑.创建执行环境的过程包含了创建函数的作用域,函数也是在
JavaScript中闭包的详解

闭包是什么在 JavaScript 中,闭包是一个让人很难弄懂的概念.ECMAScript 中给闭包的定义是:闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量. 是不是看完这个定义感觉更加懵逼了?别急,我们来分析一下. 闭包是一个函数闭包可以使用在它外面定义的变量闭包存在定义该变量的作用域中好像有点清晰了,但是使用在它外面定义的变量是什么意思,我们先来看看变量作用域. 变量作用域变量可分为全局变量和局部变量.全局变量的作用域就是全局性的,在 js
javascript深入理解js闭包

一.变量的作用域要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function f1(){ var n=999; } alert(n); // error 这里有一个地方需要注意,函数
javascript中闭包概念与用法深入理解

本文实例分析了javascript中闭包概念与用法.分享给大家供大家参考,具体如下: 1.问题的引出,什么时候会遇到闭包? 首先因为JS是没有块状作用域的,但是有函数作用域即函数作为了局部变量之间的界限,不同函数内的局部变量具有独立性, 因为JS没有块状作用域,笔者初学JS时,在事件的监听时,因为不理解JS中局部变量的作用域,犯过不少错误! (1)JS中的变量作用域 for(var i=0;i<9;i++) { } alert(i) //输出9 我们发现,虽然变量i是块状区域for()内的一个局
轻松学习Javascript闭包

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 当function里嵌套function时,内部的function可以访问外部function里的变量. function foo(x) { var tmp = 3; function bar(y) { alert(x + y + (++tmp)); } bar(10); } foo(2) 不管执行多少次,都会alert 16,因为bar能访问foo的参数x,也能访问foo的变量tmp. 但
javascript 闭包详解及简单实例应用

JS 闭包详解及实例: 最近学习JS的基础知识,学习了闭包的知识点,有很多疑惑,这一段时间还是一直有在看闭包的相关知识理解就更深入了一点,下面说说我的理解. function fn(){ var a = 0; return function (){ return ++a; } } 如上所示,上面第一个return返回的就是一个闭包,那么本质上说闭包就是一个函数.那么返回这个函数有什么用呢? 那是因为这个函数可以调用到它外部的a这个变量.其实也就是说,return返回的是这个函数 + a这个变量
JavaScript cookie详解及简单实例应用

JavaScript cookie详解一.cookie基本介绍 cookie是document的对象.cookie可以使得JavaScript代码能够在用户的硬盘上持久地存储数据,并且能够获得以这种方式存储的数据.cookie还可以用于客户端脚本化. cookie数据可以自动地在Web浏览器好Web服务器之间传递. 在浏览器中可以通过navigator.cookieEnabled属性检查浏览器的cookie功能是否被激活. 二.cookie的基本属性每个cookie都有四个可
javascript 单例模式详解及简单实例

JS 单例模式概要: 单例指一个类只有一个实例,这个类自行创建这个实例. 利用对象字面量直接生成一个单例: var singleton = { prop: 1, method: function(){ console.log(a); //1 } } 严格的说对象字面量可能不算单例模式,生成单例是对象字面量的作用(已经被封装),而单例模式是一个设计模式(需要自行构思或设计). 在类内部用new生成实例的单例模式: var instance; var foo = function(){ if(!i
jQuery extend()详解及简单实例

jQuery extend()详解及简单实例使用jQuery的时候会发现,jQuery中有的函数是这样使用的: $.get(); $.post(); $.getJSON(); 有些函数是这样使用的: $('div').css(); $('ul').find('li'); 有些函数是这样使用的: $('li').each(callback); $.each(lis,callback); 这里涉及到两个概念:工具方法与实例方法.通常我们说的工具方法是指无需实例化就可以调用的函数,如第一段代码:实例
JSP 注释的详解及简单实例

JSP 注释的详解及简单实例一三种格式二举例 <body> <h1>大家好</h1> <hr>  <%-- 我是JSP注释,在客户端不可见 --%> <% //单行注释 /*多行注释*/ out.println("大家好,欢迎大家学习JAVAEE开发."); %> <br> 你好,<%=s %><br> x+y
mybatis分页插件pageHelper详解及简单实例

mybatis分页插件pageHelper详解及简单实例工作的框架spring springmvc mybatis3 首先使用分页插件必须先引入maven依赖,在pom.xml中添加如下  <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>3.7.5
Java File类的详解及简单实例

Java File类的详解及简单实例 1. File():构造函数,一般是依据文件所在的指定位置来创建文件对象. CanWrite():返回文件是否可写. CanRead():返回文件是否可读. CompareTo(File pathname):检查指定文件路径间的顺序. Delet():从文件系统内删除该文件. DeleteOnExit():程序顺利结束时从系统中删除文件. Equals(Object obj):检查特定对象的路径名是否相等. Exists():判断文件夹是否存在. GetA
JAVA 注解详解及简单实例

JAVA 注解详解及简单实例何为注解注解(Annotation)又称为元数据,在JDK1.5后引入,它的作用是: 生成文档这是注解的原始用途,可以通过注解生成JavaDoc文档跟踪代码的依赖性可以通过注解替代配置文件,简化项目的配置.现有的许多框架都采用这个功能减少自己的配置. 编译检查在编译时进行格式检查,例如@Override 基础注解 Java目前内置了三种标准注解,以及四种元注解.四种元注解负责创建其他的注解. 三种标准注解 @Override,表示当前的方法覆盖超类中
微信小程序中input标签详解及简单实例

微信小程序中input标签详解及简单实例使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,我是定义了他的id,这是我们最常用的,所以就配了一个id,毕竟不操作他,又为什么设成输入框呢, 第二,设置他的样式, 第三,设置他的输入类别,以上都是很简单的第四.使用正则l:哎限定输入为纯数字.这点可能有点不理解,这是对他的keyup事件监听,将不是纯数字的list无视掉.注意,是对
linux 下实现sleep详解及简单实例

linux 下实现sleep详解及简单实例 sleep: 普通版本 1.基本设计思路: 1>注册SIGALRM信号的处理函数: 2>调用alarm(nsecs)设定闹钟: 3>调⽤pause等待,内核切换到别的进程运行: 4>nsecs秒之后,闹钟超时,内核发SIGALRM给这个进程 ; 5>从内核态返回这个进程的⽤户态之前处理未决信号,发现有SIGALRM信号,其处理函数是sig_alrm; 6> 切换到用户态执行sig_alrm函数,进⼊sig_alrm函数时

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

相关推荐

随机推荐