在了解闭包之前需要了解下作用域的工作原理作为基础,传送门

闭包是一个老生常谈的问题,在面试中也会经常被问到,它是理解javascript的一个关卡,但是,如果真正理解了闭包,你就会发现,其实它再javascript中无处不在。可以这么说,闭包是我们在写代码中经常会产生的一种结果,我们不需要总觉得它十分神圣,我们需要做的就是有意识的去识别发现它,再去根据你自己的想法利用它来做一些操作。

我们先看一段比较基础的代码:

function demo(){
  var a =1;
  function demoIn(){
    console.log( a );
  }
  demoIn();
}
demo();

这段代码就是一个简单的嵌套作用域的代码段,函数demoIn利用RHS查询访问了一个外部变量a,代码很简单,重点在于demoIn对a的作用域查询规则,它却是理解闭包的基础。技术上来讲他不是一个真正的闭包,但是学术上来讲,函数demoIn有一个涵盖demo作用域的闭包。

我们来改造以上代码让它成为一个真正的闭包:

function demo(){
  var a = 1;
  function demoIn(){
    console.log( a );
  }
  return demoIn;
}
var demoout = demo();
demoout();

在上面的代码块中我们将demoIn这个函数本身作为返回值。demo在执行时他的返回值(demoIn)被赋值给了变量demoout,最后调用demoout,实际上只是通过了不一样的标识符引用来调用了内部的demoIn函数。但是我们可以发现,demoIn在自己定义的作用域外被执行了。根据javascript的垃圾回收机制,一般情况下,函数在被完全执行后(不再使用后),一般其内部的整个作用域都会被销毁。但是因为这里是一个闭包,虽然其被执行了,但是demoIn却作为返回值赋值给了demoout,demoout变量一直保持着对demoIn的引用,而demoIn又作为内部函数,它拥有了demo的作用域,所以,这个作用域能一直存活。所以在demoout被执行时,肯定会能访问到这个被存留的demo作用域内的变量a。

无论我们用何种手段将内部函数传递到所在的作用域外,他都会持有对原始定义作用域的引用,无论在何处执行这个函数都会使用闭包。

function ST(msg){
  setTimeout(function demo(){
    console.log(msg);
  },1000);
} ST("hi everybody")

在上面的代码块中,demo这个内部函数作为参数传递给了setTimeout,demo具有涵盖ST作用域的闭包,因此还保有对变量msg的引用。ST在执行1000毫秒后,他的内部作用域不会消失,demo依然有ST作用域的闭包。

讲到闭包肯定要说说它和循环的那些事情。

for( var i = 1; i<=5; i++ ){
  setTimeout( function demo(){
    console.log(i);
  },1000);
}

以上代码有不少初学者会这样写出,尤其是在事件绑定上。这段代码,我们预期的结果是分别输出1~5,每秒一次,一次一个。但是,实际上我们会得到五次6。

首先我们说一下6是从哪来的,因为这个循环结束条件是i<=5。条件成立的时候i是6,这就是6的由来。我们再想想,首先这段代码中的所有延时函数会在循环执行完才执行不管你延时是多久,但是在循环执行完了后这个作用域中只有一个i,而因为之前循环条件的原因,i最后等于6,而又因为他们都是在循环结束才执行,最后查询出来的i都是同一个值6。也就是说我们如果想输出不同的i那就需要不同的封闭作用域,这样我们想到了IIFE立即执行方法,那我们再次改造下上面的代码:

for( var i = 1; i<=5; i++ ){
  (function(j){
   setTimeout( function demo(){
    console.log(j);
   },1000);
  })(i);
}

在这里我们在循环中加入了IIFE,这样每次循环都会生成一个封闭作用域,并将i作为参数传进去。这样的话问题就解决了。

当然如果我们学过ES6就知道新的块级作用域,它和闭包搭配会产生不一样的火花。

总结一下:当函数可以记住并访问所在的作用域,即使函数是在当前作用域外执行的,这时就产生了闭包。

主要闭包应用场:设计私有的方法和变量。这在做框架的时候体现更明显,有些方法和属性只是运算逻辑过程中的使用的,不想让外部修改这些属性,因此就可以设计一个闭包来只提供方法获取。

优点:

1. 逻辑连续,当闭包作为另一个函数调用的参数时,避免你脱离当前逻辑而单独编写额外逻辑。
2. 方便调用上下文的局部变量。
3. 加强封装性,第2点的延伸,可以达到对变量的保护作用。

缺点:

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

深入理解Javascript--闭包的更多相关文章

  1. 我从来不理解JavaScript闭包,直到有人这样向我解释它...

    摘要: 理解JS闭包. 原文:我从来不理解JavaScript闭包,直到有人这样向我解释它... 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 正如标题所述,JavaScript闭包 ...

  2. 深入理解JavaScript闭包【译】

    在<高级程序设计>中,对于闭包一直没有很好的解释,在stackoverflow上翻出了一篇很老的<JavaScript closure for dummies>(2016)~ ...

  3. 【转】深入理解JavaScript闭包闭包(closure) (closure)

    一.什么是闭包?"官方"的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.相信很少有人能直接看懂这句话,因为他描述 ...

  4. 全面理解Javascript闭包和闭包的几种写法及用途

    好久没有写博客了,过了一个十一长假都变懒了,今天总算是恢复状态了.好了,进入正题,今天来说一说javascript里面的闭包吧!本篇博客主要讲一些实用的东西,主要将闭包的写法.用法和用途.  一.什么 ...

  5. 深入理解JavaScript闭包(closure)

    最近在网上查阅了不少javascript闭包(closure)相关的资料,写的大多是非常的学术和专业.对于初学者来说别说理解闭包了,就连文字叙述都很难看懂.撰写此文的目的就是用最通俗的文字揭开Java ...

  6. 深入理解javascript闭包(一)

    闭包(closure)是Javascript语言的一个难点.也是它的特色,非常多高级应用都要依靠闭包实现. 一.什么是闭包? 官方"的解释是:闭包是一个拥有很多变量和绑定了这些变量的环境的表 ...

  7. 深入理解javascript闭包(一)

    原文转自脚本之家(http://www.jb51.net/article/24101.htm) 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. ...

  8. 深入理解Javascript闭包概念

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部能够直接读取全局变量 ...

  9. 轻松理解JavaScript闭包

    摘要 闭包机制是JavaScript的重点和难点,本文希望能帮助大家轻松的学习闭包 一.什么是闭包? 闭包就是可以访问另一个函数作用域中变量的函数. 下面列举出常见的闭包实现方式,以例子讲解闭包概念 ...

  10. 【译】理解JavaScript闭包——新手指南

    闭包是JavaScript中一个基本的概念,每个JavaScript开发者都应该知道和理解的.然而,很多新手JavaScript开发者对这个概念还是很困惑的. 正确理解闭包可以帮助你写出更好.更高效. ...

随机推荐

  1. 一款强大的Android网络渗透软件dsploit

    dSploit是一款基于Android系统的功能十分全面强大的网络渗透工具,可以提供给网络安全工作人员检查网络的安全性.小黑这次主要使用了其中的"简易嗅探""会话劫持&q ...

  2. Oracle函数组的使用

    --1.组函数--COUNT():用来统计记录的条数 如果没有记录,返回 0--COUNT函数可以根据一列或多列进行计算,没有排重功能--统计EMP表一共有多少条记录select count(empn ...

  3. ObjC运行时部分概念解析(一)

    转型iOS已经许久了,Runtime(运行时)还没有好好了解过.之前没有阅读过源码,紧紧凭借自己的臆测.现在阅读下源码,做一些笔记.方便再次翻阅 SEL SEL是一个关键字,如果没有涉及runtime ...

  4. Linux学习之四--Nginx

    关于Nginx的 nginx的是一个高性能的Web服务器的软件.它比Apache HTTP服务器更加灵活,重量轻的程序. 本教程将教你如何安装和你的CentOS 7服务器上启动Nginx的.   先决 ...

  5. Sicily 1031: Campus (最短路)

    这是一道典型的最短路问题,直接用Dijkstra算法便可求解,主要是需要考虑输入的点是不是在已给出的地图中,具体看代码 #include<bits/stdc++.h> #define MA ...

  6. Qt - 读取GPS数据

    1.GPS型号为ublox(EVK-M8L),配有USB接口,Qt版本5.7 2.实现步骤: (1)实现串口通信 采用Qt5.7 内置的串口操作类QSerialPort和QSerialPortInfo ...

  7. Java内存管理及GC算法

    概述 内存划分 虚拟机规范中将内存分为六大部分,分别为PC寄存器.JAVA虚拟机栈.JAVA堆.方法区.运行时常量及本地方法栈. 1.PC寄存器:线程独占: 2.JAVA虚拟机栈:线程独有:JAVA虚 ...

  8. DevExpress 隐藏Ribbon中barbuttonItem的SuperTip(2)

    在form界面增加 toolTipController 工具 然后将 ribbonControl.ToolTipController 的属性设置成 toolTipController toolTipC ...

  9. 监控Activity的启动等状态--- 源码级

    1.代码 参见:http://stackoverflow.com/questions/9452549/monitoring-the-recent-apps private void setActivi ...

  10. 【原创】web端高德地图javascript API的调用

    关于第三放地图的使用,腾讯.百度.高德 具体怎么选择看你自己怎么选择了. 高德地图开放平台:http://lbs.amap.com/ 本次使用的是高德的javascript API http://lb ...