轻松理解JavaScript闭包


Posted in Javascript onMarch 14, 2017

摘要

闭包机制是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时,就在上一轮循环的基础上进行计算。

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

Javascript 相关文章推荐
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
用Juery网页选项卡实现代码
Jun 13 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
React-Native之定时器Timer的实现代码
Oct 04 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
微信小程序实现收货地址左滑删除
Nov 18 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 #Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 #Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 #Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 #Javascript
vuejs响应用户事件(如点击事件)
Mar 14 #Javascript
微信小程序 在线支付功能的实现
Mar 14 #Javascript
JS和canvas实现俄罗斯方块
Mar 14 #Javascript
You might like
星际流派综述
2020/03/04 星际争霸
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
python 调用有道api接口的方法
2019/01/03 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
Python3实现二叉树的最大深度
2019/09/30 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
综合办公室个人的自我评价
2013/12/22 职场文书
高中生家长寄语大全
2014/04/03 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android