轻松理解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 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
微信小程序之picker日期和时间选择器
Feb 09 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
JavaScript基本语法_动力节点Java学院整理
Jun 26 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 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
PHP6新特性分析
2016/03/03 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
php mysql 封装类实例代码
2016/09/18 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
python 实现UTC时间加减的方法
2018/12/31 Python
基于Django统计博客文章阅读量
2019/10/29 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
幼儿园教师自荐书
2015/03/06 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
红色故事汇观后感
2015/06/18 职场文书
2015年车间管理工作总结
2015/07/23 职场文书