轻松理解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作为变量传进闭包。

三、使用闭包的注意点

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（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中的闭包 # JS继承与闭包及JS实现继承的三种方式 # 浅谈JavaScript作用域和闭包 # JS闭包的几种常见形式实例详解 # JS实现闭包中的沙箱模式示例 # JavaScript闭包的简单应用 # 通过示例彻底搞懂js闭包 # JavaScript闭包和回调详解 # 浅谈JS封闭函数、闭包、内置对象 # JavaScript闭包_动力节点Java学院整理 # 深入理解Javascript中的作用域链和闭包 # JS闭包可被利用的常见场景小结 # 利用js的闭包原理做对象封装及调用方法 # javascript闭包功能与用法实例分析 # JavaScript中闭包的详解 # JS闭包用法实例分析 # 图解Javascript——作用域、作用域链、闭包 # js中的闭包学习心得 # 都是 # 本轮 # 会在 # 弹出 # 解决方法 # 的是 # 就在 # 有个 # 基础上 # 均为 # 形成了 # 给了 # 希望能 # 只在 # 要将 # 你把 # 将不 # 这是因为 # 具体情况 # 再加

返回目录在线咨询

上一篇：全能仪器建站是否支持多语言网站建设，具体如何操作？
下一篇：Python自动监控服务器磁盘增长趋势并生成预测报告的脚本方案【教学】

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

轻松理解JavaScript闭包

您的项目需求