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 相关文章推荐
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
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
Discuz 模板引擎的封装类代码
2008/07/18 PHP
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
js 内存释放问题
2010/04/25 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
在Python中使用异步Socket编程性能测试
2014/06/25 Python
python获取当前日期和时间的方法
2015/04/30 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
python MD5加密的示例
2020/10/19 Python
python 写一个水果忍者游戏
2021/01/13 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
餐饮管理自我介绍信
2014/01/15 职场文书
学校节能减排方案
2014/06/13 职场文书
2016公司新年问候语
2015/11/11 职场文书
教师教育心得体会
2016/01/19 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
Django 实现jwt认证的示例
2021/04/30 Python