js闭包实例汇总


Posted in Javascript onNovember 09, 2014

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 相关文章推荐
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
jQuery 使用手册(七)
Sep 23 Javascript
js 小贴士一星期合集
Apr 07 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
require、backbone等重构手机图片查看器
Nov 17 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 #Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 #Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 #Javascript
js 操作符汇总
Nov 08 #Javascript
jquery的总体架构分析及实现示例详解
Nov 08 #Javascript
jquery常用方法及使用示例汇总
Nov 08 #Javascript
JQuery遍历json数组的3种方法
Nov 08 #Javascript
You might like
1.PHP简介
2006/10/09 PHP
php的header和asp中的redirect比较
2006/10/09 PHP
聊天室php&amp;mysql(一)
2006/10/09 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
python变量不能以数字打头详解
2016/07/06 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
小学生秋游活动方案
2014/02/23 职场文书
群众路线领导对照材料
2014/08/23 职场文书
补充协议书
2015/01/28 职场文书
车队安全员岗位职责
2015/02/15 职场文书
银行稽核岗位职责
2015/04/13 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js
python操作xlsx格式文件并读取
2021/06/02 Python