javascript闭包的理解


Posted in Javascript onApril 01, 2015

1、首先我们要知道变量作用域链

变量的作用域分两种:全局变量和局部变量。没有定义到任何函数中的变量为全局变量,在函数中定义的变量为局部变量,注意在函数内部定义变量时一定要使用var关键字,不带var关键字的变量为全局变量。

javascript中每一段代码都有与之关联的作用域链,这个作用域链是一个对象列表或者链表,定义了这段代码“作用域”中的变量。顶层代码的作用域由全局变量组成;不包含嵌套的函数的作用域链有两个对象:一个是定义的函数参数和局部变量的对象,一个是全局变量对象;而嵌套函数的作用域链有三个对象:函数参数和局部变量--外部函数的参数和局部变量--全局变量。函数可以访问作用域链上的对象,因此函数可以访问全局变量,而反过来却不可以,即在函数外部不能访问函数内的局部变量。

var a=1;
function wai(){
  alert(a);        
  var m=10;
  n=20;
}

wai();          //=> 1; 函数内部可以访问全局变量
alert(m);        //=> error; 外部访问函数局部变量报错  
alert(n);        //=> 20; 函数内部定义的变量未使用var关键字,所以是全局变量,外部可以访问

2、如何在外部读取局部变量

有时候,我们需要在外部访问函数内板的局部变量,这个时候我们就需要使用变通的方法来实现。我们利用javascript变量作用域的特点,在函数内部定义子函数,子函数就可以访问父函数里的变量了

function wai(){
 var m=10;
  function nei(){
    alert(m); 
 }
  return nei;
}

var f = wai();
nei();              //=> error; nei()函数是一个局部变量,在外部不能访问
f();               //=> 10;

3、闭包

上一段代码的nei()函数就是一个闭包,从上面可知,闭包就是可以读取函数内部局部变量的函数,是定义到函数内部的函数,本质上可以认为是函数内部和函数外部连接到一起的桥梁。

闭包的作用有两个:

一是前面提到的可以读取函数内部的变量

二是可以让这些局部变量保存在内存中,实现变量数据共享

function wai(){
  var m=99;
  function nei(){
    alert(m);
    m++;
  }
  return nei;
}
      
var f= wai();
f();         //=> 99;
f();         //=> 100;
f();         //=> 101;

上述实例当wai()函数运行时,变量m就保存到内存中,执行f()就可以读取m的值,但直接alert(m)不可以!

我们还可以向闭包函数传参数,如下面示例所示,定义一个匿名函数并返回了一个闭包函数,该函数将传入的参数与匿名函数中的局部变量i相加,并使i自增;

var wai=(function(){
  var i=0;
  return function(num){
    num+=i;
    alert(num);
    i++;
 }
})();
wai(1);//1
wai(2);//3
wai(3);//5

为了更深入理解闭包,我们看下面一个示例:

现在我想定义一个函数,该函数返回一个数组,且数组每个元素都是一个函数,每个函数会弹出对应的索引值

我们可能会这样写

function box(){
 var arr=[];
  for(i=0;i<5;i++){
    arr[i]=function(){return i;}
  }
 return arr;  
}
var a=box();
alert(a);        //=>包含五个函数体的数组
alert(a[0]());     //=> 5;
alert(a[1]());    //=> 5;

上面的代码发现弹出的都是5,而不是我们预想的0,1,2,3,4,这是因为i也是存在于内存中的局部变量,当我们运行a[0]()时,i的值已经是5,i的值在整个box()函数运行过程中是不断自增的。

解决方法:闭包的实现

function box(){
var arr=[];
    for(var i=0;i<5;i++){

         arr[i]=(function(num){
           return function(){return num;}
         })(i);

     }
return arr;     
}

var arr=box();

for(var i=0;i<5;i++){

  alert(arr[i]());//0,1,2,3,4
}

4、使用闭包的注意事项

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数的变量值。

5、下面是从几个关于闭包的思考题

如果你能理解下面代码的运行结果,应该就算理解闭包的运行机制了。

Js代码

var name = "The Window"; 
var object = { 
  name : "My Object", 
  getNameFunc : function(){ 
    return function(){ 
      return this.name;       //=>嵌套函数的this为全局变量或undefined,不会继承父函数的this
    }; 
  } 
}; 
alert(object.getNameFunc()()); //The Window

以上之所以输出的为“The window”是因为在嵌套函数中this不会继承父函数this,其值为全局变量或undefined(ECMAScript5下),因此返回的为全局对象的name变量。要想让其返回object的name属性,代码如下:

var name = "The Window"; 
   var object = { 
    name : "My Object", 
    getNameFunc : function(){ 
      var cur=this;
      return function(){ 
        return cur.name;
      }; 
    } 
  }; 
  alert(object.getNameFunc()()); //=》My Object

以上代码将父函数object的this赋给cur变量,其嵌套函数就可以通过cur变量访问其属性了

------------------------------------------------------------------------------------------------------
JavaScript闭包例子

function outerFun()
{
var a=0;
function innerFun()
{
a++;
alert(a);
} 
}
innerFun();  //=>error

上面的代码是错误的.innerFun()的作用域在outerFun()内部,所在outerFun()外部调用它是错误的.

改成如下,也就是闭包:

Js代码

function outerFun()
{
   var a=0;
  function innerFun()
  {
    a++;
    alert(a);
  }
  return innerFun; //注意这里
}
var obj=outerFun();
obj(); //结果为1
obj(); //结果为2
var obj2=outerFun();
obj2(); //结果为1
obj2(); //结果为2

什么是闭包:

当内部函数 在定义它的作用域 的外部 被引用时,就创建了该内部函数的闭包 ,如果内部函数引用了位于外部函数的变量,当外部函数调用完毕后,这些变量在内存不会被 释放,因为闭包需要它们.

--------------------------------------------------------------------------------------------------------

再来看一个例子

Js代码

function outerFun()
{
   var a =0;
   alert(a); 
}
var a=4;
outerFun();   //=> 0
alert(a);      //=> 4

结果是 0,4 . 因为在函数内部使用了var关键字 维护a的作用域在outFun()内部.

再看下面的代码:

Js代码

function outerFun()
{
//没有var 
a =0;
alert(a); 
}
var a=4;
outerFun();    //=> 0
alert(a);      //=> 0

结果为 0,0 真是奇怪,为什么呢?

作用域链是描述一种路径的术语,沿着该路径可以确定变量的值 .当执行a=0时,因为没有使用var关键字,因此赋值操作会沿着作用域链到var a=4; 并改变其值.

Javascript 相关文章推荐
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
JavaScript数据类型之基本类型和引用类型的值
Apr 01 #Javascript
JavaScript之Object类型介绍
Apr 01 #Javascript
JS修改iframe页面背景颜色的方法
Apr 01 #Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 #Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 #Javascript
jQuery scrollFix滚动定位插件
Apr 01 #Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 #Javascript
You might like
VFP与其他应用程序的集成
2006/10/09 PHP
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
python实现调用其他python脚本的方法
2014/10/05 Python
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
python 实现多维数组转向量
2019/11/30 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
初婚未育证明样本
2014/10/24 职场文书
2014年化验员工作总结
2014/11/18 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
高一化学教学反思
2016/02/22 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL