当前位置:首页 > 日记 > 正文

轻松理解JavaScript闭包

轻松理解JavaScript闭包

摘要

闭包机制是JavaScript的重点和难点,本文希望能帮助大家轻松的学习闭包

一、什么是闭包?

闭包就是可以访问另一个函数作用域中变量的函数。

下面列举出常见的闭包实现方式,以例子讲解闭包概念

function f1(){    var n=999;    nAdd=function(){n+=1}    function f2(){      alert(n);    }    return f2;  }  var result=f1();  result(); // 999  nAdd();  result(); // 1000

f1是f2的父函数,而f2被赋给了一个全局变量(return的值),这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收,这便形成了闭包。

因此,可以这么理解。闭包机制就是,如果A函数引用了另一个函数B的变量,但是B返回后A仍没有返回,仍存在,因为A的引用,所以B的所有局部变量并不会随B退出而注销,会一直存在,直到A注销。此时A就是闭包。

二、闭包的this指针

闭包通常在全局环境调用的,所以this通常指向window,具体情况还是需要视执行环境而言,总之this指向执行环境。

若需要闭包的this指向闭包的包含对象,则需要将包含对象的this作为变量传进闭包。

三、使用闭包的注意点

  1. 由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
  2. 闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

四、解决一道闭包常见面试题

问题:

function onMyLoad(){  /*  抛出问题:  此题的目的是想每次点击对应目标时弹出对应的数字下标 0~4,但实际是无论点击哪个目标都会弹出数字5  问题所在:  arr 中的每一项的 onclick 均为一个函数实例(Function 对象),这个函数实例也产生了一个闭包域,  这个闭包域引用了外部闭包域的变量,其 function scope 的 closure 对象有个名为 i 的引用,  外部闭包域的私有变量内容发生变化,内部闭包域得到的值自然会发生改变  */  var arr = document.getElementsByTagName("p");  for(var i = 0; i < arr.length;i++){  arr[i].onclick = function(){   alert(i);  }  } }

解决方法

1、在外面再加一层函数,将i作为函数参数传进来,这样每次保存的是函数内部的变量,与外部i不是同一个内存空间,而每次调用函数都会生成一个局部变量,所以可以保证每次保存的值互不影响。

for(var i = 0; i<arr.length;i++){ arr[i].onclick = (function(arg){  return function () {   alert(arg);  } })(i);}

2、用ES6新特let,将for循环的var i改成let i,这样当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量。你可能会问,如果每一轮循环的变量i都是重新声明的,那它怎么知道上一轮循环的值,从而计算出本轮循环的值?这是因为 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

相关文章

Indesign怎么转曲文字并高清打印?

Indesign怎么转曲文字并高清打印?

文字,技巧,电脑软件,Indesign,高清,Indesign排版好的文件如果直接打印会出现打印不清晰的问题,需要将文字转曲并导出为pdf文件,下面我们就来看看详细的教程。软件名称:Adobe InDesign CC 2017 v12.0.0 中文破解版(附破解补丁) 32位软件大小:748…

基于input框覆盖掉数字英文的实例

基于input框覆盖掉数字英文的实例

覆盖,数字,英文,实例,电脑软件,例子1:<input type="text" value="0" onkeyup="cleartwoNum(this)">//限制input框输入只能数字:function cleartwoNum(obj) { obj.value = obj.value.replace(/[^\d]/g, '');}例子2:可以输入金额<inp…

详解webpack+vue-cli项目打包技巧

详解webpack+vue-cli项目打包技巧

项目打包,详解,技巧,电脑软件,cli,1.设置config文件夹index.js中productionSourceMap的值为false,也就是设置webpack配置中devtool为false,打包后文件体积可以减少百分之八十!!!!!!! 2.如何实现打包文件中js、css等的版本控制?设置build文件夹下的web…

Visual studio 2017添加引用时报错

Visual studio 2017添加引用时报错

加载,解决方法,引用,时报,正确,最近新装了2017,开始前几天还好,可是最近在添加引用时,报错---------------------------Microsoft Visual Studio---------------------------未能正确加载“ReferenceManagerPackage”包。此问题可能是因配置更…

Photoshop制作中国风意境的水墨建

Photoshop制作中国风意境的水墨建

国风,水墨,建筑物,意境,电脑软件,今天为大家分享Photoshop制作中国风意境的水墨建筑物图方法,教程很不错,制作出来的效果很有意境,非常值得大家学习,推荐到,一起来学习吧!先看看效果图1、首先我们把素材文件拖拽进PS,按CTRL+J复制一层2、我们选择…

udp协议简介_动力节点Java学院整理

udp协议简介_动力节点Java学院整理

节点,学院,协议,动力,简介,1.UDP简要介绍UDP是传输层协议,和TCP协议处于一个分层中,但是与TCP协议不同,UDP协议并不提供超时重传,出错重传等功能,也就是说其是不可靠的协议。2.UDP协议头UDP端口号由于很多软件需要用到UDP协议,所以UDP协议必须通…

ps怎么设置水平翻转和垂直反转的快

ps怎么设置水平翻转和垂直反转的快

设置,快捷键,反转,电脑软件,ps,很多人知道用photoshop可以设计图片,但是忽略了快捷键的快捷便利。小编在这里教你如何设置水平翻转和垂直反转的快捷键,如图所示,同一张图,快捷键快速切换就做到。软件名称:Adobe Photoshop 8.0 中文完整绿色破解…

JavaScript 详解预编译原理

JavaScript 详解预编译原理

预编译,详解,原理,电脑软件,JavaScript,JavaScript 预编译原理今天用了大量时间复习了作用域、预编译等等知识 看了很多博文,翻开了以前看过的书(好像好多书都不会讲预编译) 发现当初觉得自己学的很明白,其实还是存在一些思维误区 (很多博文具有…

asp.net+FCKeditor上传显示叉叉无

asp.net+FCKeditor上传显示叉叉无

无法显示,上传,显示,解决方法,叉叉,弄了半天也没有找到原因,然后又重新到网上下载几个,还是不行,郁闷坏了,最后结合其他编辑器的用法,才知道是配置文件夹中上传文件夹的路径写错了 比如要上传到项目的根目录下的UserFiles下面,web.config的配置如…

ps设计魔幻绚丽的兔子和鹿重合头像

ps设计魔幻绚丽的兔子和鹿重合头像

教程,绚丽,头像,兔子,电脑软件,使用Photoshop设计魔幻绚丽的兔子和鹿重合头像,本次教程内容主要来自Ilya Shapko的作品,我非常欣赏他的这幅作品配色的绚丽,以及兔子和鹿相结合的魔幻效果。那么如何设计出这样的效果呢?我们需要注意哪些细节?有哪…

ps怎么制作信号干扰效果的?

ps怎么制作信号干扰效果的?

信号,干扰,效果,电脑软件,ps,干扰信号的时候画面是什么样子的呢?今天我们就来看看详细的制作方法软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、导入原图,并复制3层出来(背景就先隐藏好了)2、右键图层打…

Excel中2010版进行创建下拉菜单的

Excel中2010版进行创建下拉菜单的

下拉菜单,操作技巧,操作步骤,电脑软件,Excel,  Excel功能多多,满足人们日常应用的表格,像小编这边羊毛衫市场,各种进出货都是用纸记录容易丢。今天,小编就教大家在Excel中2010版进行创建下拉菜单的操作技巧。Excel中2010版进行创建下拉菜单的…