Js闭包

闭包前要了解的知识 

1. 函数作用域

(1).Js语言特殊之处在于函数内部可以直接读取全局变量

<script type="text/javascript">
var n=100;
function parent(){
alert(n);
}
parent();//
</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);//
//当然在php里更是如此了,
<?php
function parent(){
global $m;//全局 ,定义与赋值要分开
$m=50;
}
parent();
echo $m;//
?>
//没global的话,一样会报没定义的错误

有时,需要得到函数内部的的局部变量,就需要变通的方法实现

利用js变量作用域的特点,如在函数内部定义子函数,对于子函数来说,父函数就是它的全局,子函数可以访问父函数里的变量(对于整个js代码来说又是局部变量)

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

把匿名函数的执行结果(即对里面子函数的声明赋给全局变量cut),i就保存在内存里了

执行cut()时就直接从内存取值了,i只有cnt()函数才能调用,直接alert(i)是不行的

还可以向闭包内传参

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

为了对闭包有更好的理解,我们看以下代码

比如我想返回一个数组,数组里面有5个函数,第一个函数弹出0,第二个弹出1...

代码如果这样写

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]());
alert(a[1]());

弹出的函数体

function(){return i;}

}

最后这个i是4,之后++成为5

For循环停止

发现均弹出5,明显不符合我们的要求

解决方案1

自我即时执行里面的函数

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

但是我们发现 返回的数组里的元素是函数执行的结果,但我们想要的是函数

有得升级我们的代码

解决方案2 闭包实现

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
}

关键代码

arr[i]=(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);

这就是闭包的好处!

js闭包理解实例小结的更多相关文章

  1. js闭包理解

    js闭包的作用是使函数外可以访问函数内部的变量,是通过 在函数内部 定义 访问函数内变量 的函数实现的,内部的一个函数产生一个闭包 function a() { var i=0; return fun ...

  2. JS闭包理解_摘

    原文地址1:http://www.cnblogs.com/mzwr1982/archive/2012/05/20/2509295.html 闭包是一个比较抽象的概念,尤其是对js新手来说.书上的解释实 ...

  3. js闭包理解案例-解决for循环为元素注册事件的问题

      转发自http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html       一.变量的作用域 要理解闭包,首 ...

  4. js 闭包 理解

    1.什么是闭包 定义:是指有权访问另一个函数作用域中的变量的函数 创建闭包:在一个函数内部创建另一个函数 基本特点 在返回的匿名函数中 可以调用外部函数的变量 如下例中所示 内部函数(匿名函数) 可以 ...

  5. js 闭包 理解 copy

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 下面就是我的学习笔记,对于Javascript初学者应该是很有用的. 一.变量的作用域 要理解 ...

  6. js闭包理解与使用场景

    要理解闭包首先要知道什么是函数的作用域链 因为有函数的作用域链存在,所以函数无论在哪里调用,函数都可以使用函数外部作用域的变量. 当一个函数被调用时,会创建一个执行环境及相应的作用域链.然后使用arg ...

  7. js 闭包理解

    闭包主要应用于两种情况: 1 函数作为返回值. 2 函数作为参数传递. 第一种举例: function fn(){ var max = 10; return function bar(){ if(x ...

  8. 前端基本知识(三):JS的闭包理解

    JS闭包的理解 一.变量的作用域 二.如何从外部读取局部变量 三.什么是闭包 四.深入理解闭包 五.闭包的用途 六.使用闭包注意情况 七.JavaScript的垃圾回收机制 八.一些思考题 一.变量作 ...

  9. 前端基本知识(三):JS的闭包理解(第一个思考题有错误,已修改)

    JS闭包的理解 一.变量的作用域 二.如何从外部读取局部变量 三.什么是闭包 四.深入理解闭包 五.闭包的用途 六.使用闭包注意情况 七.JavaScript的垃圾回收机制 八.一些思考题 一.变量作 ...

随机推荐

  1. Sql Server之数据类型详解

      数据类型是一种属性,用于指定对象可保存的数据的类型,SQL Server中支持多种数据类型,包括字符类型.数值类型以及日期类型等.数据类型相当于一个容器,容器的大小决定了装的东西的多少,将数据分为 ...

  2. [RGeos]手簿

    1.屏幕坐标以像素为单位,地图坐标通常以米为单位,CAD制图默认以毫米为单位. DPI是“dot per inch”的缩写.顾名思义,就是指在每英寸长度内的点数.通常,我们都使用dpi来作为扫描器和打 ...

  3. python 抓取javascript 动态数据

    1. 新安装一个python库 :~$ sudo pip install seleniumhq 2. 编写代码: 以获取百度百科点赞数为例 import selenium from selenium ...

  4. Java内存结构、类的初始化、及对象构造过程

    概述 网上关于该题目的文章已经很多,我觉得把它们几个关联起来讲可能更好理解一下.与其它语言一样,它在执行我们写的程序前要先分配内存空间,以便于存放代码.数据:程序的执行过程其实依然是代码的执行及数据的 ...

  5. poj3480--John

    题意:n堆石子,两人轮流操作,每次操作只能选定其中一堆,并取走若干个(>=1个).谁取走最后一个谁输.给定一个状态,问先取的赢还是后取的赢. 整个游戏反过来,如果sg为0先手必胜,不为0必败.( ...

  6. centos7下编译安装nginx1.10

    1.下载pcre 下载地址:ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/ 解压到/usr/local/pcre8.3.9 2.下载ope ...

  7. 8. American Friendship 美国式的友谊

    8. American Friendship 美国式的友谊 (1) Americans usually consider themselves a friendly people.Their frie ...

  8. 00001 - Linux 上的 Shebang 符号(#!)

    使用Linux或者unix系统的同学可能都对#!这个符号并不陌生,但是你真的了解它吗? 本文了将给你简单介绍一下Shebang(”#!”)这个符号. 首先,这个符号(#!)的名称,叫做”Shebang ...

  9. nginx fastcgi配置

    1.1 nginx概述nginx简介Nginx是俄罗斯人编写的十分轻量级的HTTP服务器,Nginx,它的发音为“engine X”, 是一个高性能的HTTP和反向代理服务器,同时也是一个IMAP/P ...

  10. 分布式改造剧集三:Ehcache分布式改造

    第三集:分布式Ehcache缓存改造 前言 ​ 好久没有写博客了,大有半途而废的趋势.忙不是借口,这个好习惯还是要继续坚持.前面我承诺的第一期的DIY分布式,是时候上终篇了---DIY分布式缓存. 探 ...