全面理解JavaScript中的闭包


Posted in Javascript onMay 12, 2016

引子

闭包是有权访问另一个函数作用域中的变量的函数。
闭包是javascript中很难理解的部分,很多高级的应用都依靠闭包来实现的,我们先来看下面的一个例子:

function outer() {
  var i = 100;
  function inner() {
    console.log(i);
  }
}

上面代码,根据变量的作用域,函数outer中所有的局部变量,对函数inner都是可见的;函数inner中的局部变量,在函数inner外是不可见的,所以在函数inner外是无法读取函数inner的局部变量的。

既然函数inner可以读取函数outer的局部变量,那么只要将inner作为返会值,就可以直接在ouer外部读取inner的局部变量。

function outer() {
  var i = 100;
  function inner() {
     console.log(i);
  }
  return inner;
}
var rs = outer();
rs();

这个函数有两个特点:

  • 函数inner嵌套在函数ouer内部;
  • 函数outer返回函数inner。

这样执行完var rs = outer()后,实际rs指向了函数inner。这段代码其实就是一个闭包。也就是说当函数outer内的函数inner被函数outer外的一个变量引用的时候,就创建了一个闭包。

作用域
简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在JavaScript中,变量的作用域有全局作用域和局部作用域两种。

全局作用域

var num1 = 1;
function fun1 (){
  num2 = 2;
}

以上三个对象num1,num2和fun1均是全局作用域,这里要注意的是末定义直接赋值的变量自动声明为拥有全局作用域;

局部作用域

function wrap(){
  var obj = "我被wrap包裹起来了,wrap外部无法直接访问到我";
  function innerFun(){
    //外部无法访问我
  }
}

作用域链
Javascript中一切皆对象,这些对象有一个[[Scope]]属性,该属性包含了函数被创建的作用域中对象的集合,这个集合被称为函数的作用域链(Scope Chain),它决定了哪些数据能被函数访问。

function add(a,b){
  return a+b;
}

当函数创建的时候,它的[[scope]]属性自动添加好全局作用域
全面理解JavaScript中的闭包

var sum = add(3,4);

当函数调用的时候,会创建一个称为运行期上下文(execution context)的内部对象,z这个对象定义了函数执行时的环境。它也有自己的作用域链,用于标识符解析,而它的作用域链初始化为当前运行函数的[[Scope]]所包含的对象。

全面理解JavaScript中的闭包

在函数执行过程中,每遇到一个变量,都会经历一次标识符解析过程以决定从哪里获取和存储数据。该过程从作用域链头部,也就是从活动对象开始搜索,查找同名的标识符,如果找到了就使用这个标识符对应的变量,如果没找到继续搜索作用域链中的下一个对象,如果搜索完所有对象(最后一个为全局对象)都未找到,则认为该标识符未定义。

闭包
闭包简单来说就是一个函数访问了它的外部变量。

var quo = function(status){
  return {
    getStatus: function(){
      return status;
    }
  }
}

status保存在quo中,它返回了一个对象,这个对象里的方法getStatus引用了这个status变量,即getStatus函数访问它的外部变量status;

var newValue = quo('string');//返回了一个匿名对象,被newValue引用着
newValue.getStatus();//访问到了quo的内部变量status

假如并没有getStatus这个方法,那么quo('sting')结束后,status自动被回收,正是因为返回的匿名对象被一个全局对象引用,那么这个匿名对象又依赖于status,所以会阻止status的释放。

例子:

//错误方案
var test = function(nodes){
  var i ;
  for(i = 0;i<nodes.length;i++){
    nodes[i].onclick = function(e){
      alert(i);
    }
  }
}

匿名函数创建了一个闭包,那么其访问的i是外部test函数中的i,所以每一个节点实际上引用的是同一个i。

全面理解JavaScript中的闭包

//改进方案
var test = function(nodes){
  var i ;
  for(i = 0;i<nodes.length;i++){
    nodes[i].onclick = function(i){
      return function(){
        alert(i);
      };
    }(i);
  }
}

每一个节点绑定了一个事件,这个事件接收一个参数,并且立即运行,传入i,因为是按值传递的,所以每一次循环都会为当前i产生一个新的备份。

全面理解JavaScript中的闭包

闭包的作用

function outer() {
  var i = 100;
  function inner() {
     console.log(i++);
  }
  return inner;
}
var rs = outer();
rs();  //100
rs();  //101
rs();  //102

上面的代码中,rs是闭包inner函数。rs共运行了三次,第一次100,第二次101,第三次102,这说明在函数outer中的局部变量i一直保存在内存中,并没有在调用自动清除。

闭包的作用就是在outer执行完毕并返回后,闭包使javascript的垃圾回收机制(grabage collection)不会回收outer所占的内存,因为outer的内部函数inner的执行要依赖outer中的变量。(另一种解释:outer是inner的父函数,inner被赋给了一个全局变量,导致inner会一直在内存中,而inner的存在依赖于outer,因些outer也始终于在内存中,不会在调用结束后被垃圾收集回收)。

闭包有权访问函数内部的所有变量。
当函数返回一个闭包时,这个函数的作用域将会一直在内存中保存到闭包不存在为止。

闭包与变量

由于作用域链的机制,闭包只能取得包含函数中任何变量的最后一个值。看下面例子:

function f() {
  var rs = [];

  for (var i=0; i <10; i++) {
    rs[i] = function() {
      return i;
    };
  }

  return rs;
}

var fn = f();

for (var i = 0; i < fn.length; i++) {
  console.log('函数fn[' + i + ']()返回值:' + fn[i]());
}

函数会返回一个数组,表面上看,似乎每个函数都应该返回自己的索引值,实际上,每个函数都返回10,这是因为第个函数的作用域链上都保存着函数f的活动对象,它们引用的都是同一变量i。当函数f返回后,变量i的值为10,此时每个函数都保存着变量i的同一个变量对象。我们可以通过创建另一个匿名函数来强制让闭包的行为符合预期。

function f() {
  var rs = [];

  for (var i=0; i <10; i++) {
    rs[i] = function(num) {
      return function() {
        return num;
      };
    }(i);
  }

  return rs;
}

var fn = f();

for (var i = 0; i < fn.length; i++) {
  console.log('函数fn[' + i + ']()返回值:' + fn[i]());
}

这个版本中,我们没有直接将闭包赋值给数组,而是定义了一个匿名函数,并将立即执行匿名函数的结果赋值给数组。这里匿名函数有一个参数num,在调用每个函数时,我们传入变量i,由于参数是按值传递的,所以就会将变量i复制给参数num。而在这个匿名函数内部,又创建了并返回了一个访问num的闭包,这样,rs数组中每个函数都有自己num变量的一个副本,因此就可以返回不同的数值了。

闭包中的this对象

var name = 'Jack';

var o = {
  name : 'bingdian',

  getName : function() {
    return function() {
      return this.name;
    };
  }
}

console.log(o.getName()());   //Jack
var name = 'Jack';

var o = {
  name : 'bingdian',

  getName : function() {
    var self = this;
    return function() {
      return self.name;
    };
  }
}

console.log(o.getName()());   //bingdian

内存泄露

function assignHandler() {
  var el = document.getElementById('demo');
  el.onclick = function() {
    console.log(el.id);
  }
}
assignHandler();

以上代码创建了作为el元素事件处理程序的闭包,而这个闭包又创建了一个循环引用,只要匿名函数存在,el的引用数至少为1,因些它所占用的内存就永完不会被回收。

function assignHandler() {
  var el = document.getElementById('demo');
  var id = el.id;

  el.onclick = function() {
    console.log(id);
  }

  el = null;
}
assignHandler();

把变量el设置null能够解除DOM对象的引用,确保正常回收其占用内存。

模仿块级作用域

任何一对花括号({和})中的语句集都属于一个块,在这之中定义的所有变量在代码块外都是不可见的,我们称之为块级作用域。

(function(){
  //块级作用域
})();

闭包的应用

保护函数内的变量安全。如前面的例子,函数outer中i只有函数inner才能访问,而无法通过其他途径访问到,因此保护了i的安全性。
在内存中维持一个变量。如前面的例子,由于闭包,函数outer中i的一直存在于内存中,因此每次执行rs(),都会给i加1。

Javascript 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
JavaScript时间日期操作实例小结【5个示例】
Dec 22 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
详解jquery和vue对比
Apr 16 jQuery
微信小程序利用云函数获取手机号码
Dec 17 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 #Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 #Javascript
js自定义select下拉框美化特效
May 12 #Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 #Javascript
JS函数的定义与调用方法推荐
May 12 #Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 #Javascript
JS定义类的六种方式详解
May 12 #Javascript
You might like
Windows下安装Memcached的步骤说明
2010/04/25 PHP
PHP原理之异常机制深入分析
2010/08/08 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
Vue.js实现备忘录功能
2019/06/26 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
Python中logging模块的用法实例
2014/09/29 Python
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
pytorch 预训练层的使用方法
2019/08/20 Python
Python实现分数序列求和
2020/02/25 Python
keras 权重保存和权重载入方式
2020/05/21 Python
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
最新党员思想汇报
2014/01/01 职场文书
回门宴答谢词
2014/01/13 职场文书
小学生家长评语大全
2014/02/10 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
js中Object.create实例用法详解
2021/10/05 Javascript