脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → js闭包实例汇总

js闭包实例汇总

 更新时间：2014年11月09日 09:29:21   投稿：hebedich  
本文是通过实例来帮助大家深刻理解js闭包，是篇非常不错的文章，这里推荐给大家，有需要的小伙伴可以参考下

Js闭包
闭包前要了解的知识
1. 函数作用域
(1).Js语言特殊之处在于函数内部可以直接读取全局变量

复制代码 代码如下:

<script type="text/javascript">
var n=100;
function parent(){
  alert(n);
}
parent();//100
</script>

如果在php里

复制代码 代码如下:

<?php
$n=100;
function parent(){
  echo $n;
}
parent();//会报错 n未定义
?>

(2).在函数外部无法读取函数内的局部变量

复制代码 代码如下:

<script type="text/javascript">
function parent(){
  var m=50;
}
parent();
alert(m);//报错 m未定义
</script>

注意函数内部声明变量时一定要加var,否则就声明了一个全局变量

复制代码 代码如下:

function parent(){
m=50;
}
parent();
alert(m);//50

//当然在php里更是如此了，

复制代码 代码如下:

<?php
function parent(){
  global $m;//全局 ，定义与赋值要分开
  $m=50;
}
parent();
echo $m;//50
?>
//没global的话，一样会报没定义的错误

有时，需要得到函数内部的的局部变量，就需要变通的方法实现利用js变量作用域的特点，如在函数内部定义子函数，对于子函数来说，父函数就是它的全局，子函数可以访问父函数里的变量(对于整个js代码来说又是局部变量)

复制代码 代码如下:

<script type="text/javascript">
function parent(){
   var m=50;
   function son(){
        alert(m);
   }
   return son;
}
var s=parent();//将结果保存在全局里
s();//50
</script>

Parent内部所有局部变量对其子函数来说都是可见的,但其子函数内的局部变量对其父函数是不可见的，这就是js特有的链式作用域结构,子对象会一级一级地向上查找所有父对象的变量,父对象的所有变量对子对象都是可见的，反之不成立！上面的son函数就是闭包
有些同学可能这样

复制代码 代码如下:

function parent(){
   var m=50;
   function son(){
        alert(m);
   }
}
parent();
son()//会报 函数son未定义

注意 在javascript里，在函数里声明的函数都是局部的，函数运行完后就释放了
注意这点与php的区别

复制代码 代码如下:

<?php
function parent(){
  function son(){
      $m=50;
      echo $m;
  }
}
parent();
son();//输出50 不会报错
?>

闭包

函数内部定义函数，连接函数内部和外部的桥梁
闭包的作用有2个:
一是前面提到的读取函数内部的变量，
二是让这些变量的值保存在内存中，实现数据共享
下面是几个闭包的例子

复制代码 代码如下:

<script type="text/javascript">
var cnt=(function(){
    var i=0;
    return function(){
        alert(i);
        i++;
    }
})();
cnt();//0
cnt();//1
cnt();//2
cnt();//3

</script>

把匿名函数的执行结果(即对里面子函数的声明赋给全局变量cut),i就保存在内存里了
执行cut()时就直接从内存取值了,i只有cnt()函数才能调用，直接alert(i)是不行的
还可以向闭包内传参

复制代码 代码如下:

var cnt=(function(num){
return function(){
    alert(num);
    num++;
  }
})(5);
cnt();//5
cnt();//6
cnt();//7
//当然还可以调用时传参
var cnt=(function(){
    var i=0;
return function(num){
    num+=i;
    alert(num);
    i++;
  }
})();
cnt(1);//1
cnt(2);//3
cnt(3);//5

为了对闭包有更好的理解，我们看以下代码
比如我想返回一个数组，数组里面有5个函数，第一个函数弹出0，第二个弹出1... 
代码如果这样写

复制代码 代码如下:

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

弹出的函数体
function(){return i;}    }
最后这个i是4,之后++成为5
For循环停止
发现均弹出5，明显不符合我们的要求

解决方案1
自我即时执行里面的函数

复制代码 代码如下:

function box(){
  var arr=[];
  for(i=0;i<5;i++){
      arr=(function(num){return i;})(i);
    }
return arr;  
}
var a=box();
for(var i=0;i<a.length;i++){
  alert(a);
}

但是我们发现 返回的数组里的元素是函数执行的结果，但我们想要的是函数有得升级我们的代码

解决方案2
闭包实现

复制代码 代码如下:

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

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

         }
return arr;        
}

var arr=box();

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

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

关键代码

复制代码 代码如下:

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


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

1时


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

  以上就是闭包的好处！非常简单实用吧。

您可能感兴趣的文章:

相关文章

  • 探讨JavaScript中的Rest参数和参数默认值

    探讨JavaScript中的Rest参数和参数默认值

    这篇文章的主要介绍了JavaScript中的Rest参数和参数默认值，内容很充实,需要了解的朋友可以参考下
    2015-07-07
  • JavaScript 变量命名规则

    JavaScript 变量命名规则

    学习js的朋友一定要知道和注意，其实每种语言都有它的命名规则。
    2009-09-09
  • Javascript数组Array基础介绍

    Javascript数组Array基础介绍

    本文主要是给大家简单介绍了Array的相关基础知识，到这里也算是能对Array有更全面的理解了，希望大家能够喜欢，后续我们将继续介绍关于array的内容。
    2016-03-03
  • javascript学习笔记(二) js一些基本概念

    javascript学习笔记(二) js一些基本概念

    javascript学习笔记之js一些基本概念，学习js的朋友可以参考下
    2012-06-06
  • Javascript学习笔记5 类和对象

    Javascript学习笔记5 类和对象

    首先，不得不说，我无法达到抛开类和对象的概念来看Javascript的境界，对于Javascript是否是面向对象的说法有很多，不过我最认同的还是Javascript是一种“基于prototype的面向对象语言”。
    2010-01-01
  • easyui validatebox验证

    easyui validatebox验证

    这篇文章主要介绍了easyui validatebox验证,需要的朋友可以参考下
    2016-04-04
  • javascript操作css属性

    javascript操作css属性

    今天因需要用到js获取css属性，网上搜了半天都不合适的。有一下几种方法
    2013-12-12
  • 详解JS取出两个数组中的不同或相同元素

    详解JS取出两个数组中的不同或相同元素

    这篇文章主要介绍了JS取出两个数组中的不同或相同元素，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • EsLint入门学习教程

    EsLint入门学习教程

    ESLint是一个代码规范和错误检查工具，下面这篇文章主要介绍了EsLint的相关资料，需要的朋友可以参考学习，下面来一起看看吧。
    2017-02-02
  • DOM基础教程之使用DOM控制表单

    DOM基础教程之使用DOM控制表单

    这篇文章主要介绍了DOM基础教程之使用DOM控制表单的相关资料,需要的朋友可以参考下
    2015-01-01

最新评论