Javascript的一个特殊点就在于它的闭包和回调特性,这两个特性让初学Javascript的我是云里雾里,至今仍在苦苦摸索与理解。在一番苦思之后,整理了一下资料,将自己的理解思路记录下来,以免今后糊涂的时候再次作为索引,也希望能给和我同样的初学者带来理解上的一点帮助。

    要清楚地理解闭包,首先要有如下几个概念需要清楚:

作用域:
    作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。

一切解释都没有例子来的清楚明白:

function say_hello(){
var words = "hello world!";
alert(words);
}
这里变量words的作用域就是括号“{”和“}”之间的范围。

作用链域:
    简单来说就是如果函数中需要用到的参数在本函数中有,则用本函数中的参数,如果没有则查询上一级函数中是否有,有则用之,没有则再次向上一级查询,直至找到或找不到为止(从最内层到最外层都没有)。这里不再多说,详细的说明见:Javascript中的作用链域
    继续看例子:
var str = "outer";
function outerFun(){
var str = "inner";
alert("------1------"+str);
function innerFun(){
str +="_new";
alert("------2------"+str);
}
innerFun();
alert("------3------"+str);
}
outerFun();
alert("------4------"+str);
//输出结果
------4------outer
------1------inner
------2------inner_new
------3------inner_new

这里可以看出函数outerFun内定义了str,但是最后的alert出的str却是“------4------outer",这说明外面是访问不到里面的变量,就是outerFun函数中的变量str的作用域在outerFun函数的花括号之间;但innerFun函数中

却可以访问外面outerFun中的str,这就是作用链域的作用了,即,本作用域内不存在的变量,就向上一级进行查找,如果该例子中outerFun中没有定义str,

那么就会是如下的情形:

var str = "outer";
function outerFun(){
alert("------1------"+str);
function innerFun(){
str +="_new";
alert("------2------"+str);
}
innerFun();
alert("------3------"+str);
}
outerFun();
alert("------4------"+str);
//输出结果
------4------outer
------1------outer
------2------outer_new
------3------outer_new
js的内存回收机制:
    一般一个函数在执行开始的时候,会给其中定义的变量划分内存空间保存,以备后面的语句所用,等到函数执行完毕返回了,这些变量就被认为是无用的了,对应的内存空间也就被回收了。下次再执行此函数的时候,所有的变量又回到最初的状态,重新赋值使用。
    但是,在Javascript中存在闭包的情形,所以回收机制会有点特殊。

闭包
    所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。
    这个定义十分的难以理解,远远的丢至一边,还是用简单的话解释一遍:多层嵌套的函数中,内层的函数能够访问包含它(或是它的上级)的函数的所有变量,同时能够通过回调使得其他作用域也可以使用这些变量。其实这一点就是作用链域的体现,这种特定的变量访问的方式我们就理解为Javascript的闭包特性。


匿名函数:
    简单来讲,一句话:没有函数名的函数。
var add = function(x,y){return x+y;}

    上句中右边就是一个匿名函数。同样,这是另一种定义方式。
(function(x,y){
alert(x+y);
})(3,5);

匿名函数与闭包的区别:由于见到匿名方式的闭包比较多,因此很多人将匿名函数和闭包理解为一个概念,其实要判别一个匿名函数是不是闭包,关键就是看是否通过回调将该函数所属函数中的变量传递给了其他的作用域。

顺便提一个《Javascript高级程序设计》中的闭包的一个例子,对于初学者来说可能相对较难理解(我是用了非常久才想明白的):
function createFunctions(){
var result = new Array();
for(var i=0;i<10;i++){
result[i] = function(){
return i;
}
}
return result;
}
    闭包内是对变量的引用,而非变量值的副本,也就是说result数组的每一项的值都是对变量i的引用,仅仅只是相当于一个指针,当i的值改变时,自然result的每一项的值也就随之改变,该例子中循环完之后i为10,所以每一项都是10。(其实还是比较好理解的哈,我当初不能理解【就是看了说明还是没能理解】的原因是没有把return
后的 i 当成是引用,而是将其当成值赋给了result数组...)
    所以,理解之后就很好改了:
function createFunctions(){
var result = new Array();
for(var i=0;i<10;i++){
result[i] = (function(num){
return num;
})(i);
}
return result;
};
 闭包内如何赋值给全局变量:
    这是今天最初的目标,顺便借这个机会,将这些都整理一遍,加深理解。最后解答一下这个简单问题,直接上例子:
<div id="info">
<ul></ul>
</div> function info(){
var strArr = [];
var data = [
{
"name":"Anny",
"age":"21",
"tel":"333333"
},
{
"name":"Bob",
"age":"33",
"tel":"232223"
},
{
"name":"Tom",
"age":"25",
"tel":"53344"
}
]
for(var i=0;i<data.length;i++){
strArr[i] = (function(obj){
return "姓名:"+obj.name+" 年龄:"+obj.age+" 电话:"+obj.tel;
})(data[i]);
}
return strArr;
}
var strArr = info();
$("#info ul").html("<li>"+strArr[0]+"</li><li>"+strArr[1]+"</li><li>"+strArr[2]+"</li>");

Javascript中闭包的个人理解的更多相关文章

  1. 在Javascript中闭包(Closure)

    在Javascript中闭包(Closure) 什么是闭包 “官方”的解释是:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. ...

  2. javascript中闭包最简单的简绍

    javascript中闭包是什么 JavaScript 变量可以是局部变量或全局变量.私有变量可以用到闭包.闭包就是将函数内部和函数外部连接起来的一座桥梁. 函数的闭包使用场景:比如我们想要一个函数来 ...

  3. 在JavaScript中闭包的作用和简单的用法

    在JavaScript中闭包的作用和简单的用法 一.闭包的简介 作用域链:在js中只有函数有作用域的概念,由于函数内能访问函数外部的数据,而函数外部不能访问函数内部的数据,由上述形成一种作用域访问的链 ...

  4. 关于javascript中闭包的理解

    闭包就是能够读取其他函数内部变量的函数. 在javascript中,只有函数内部的子函数可以读取局部变量,因此,我理解闭包就是定义在一个函数内部的函数. 例子: var f1 = function() ...

  5. 对JavaScript中闭包的理解

    在前端开发中闭包是一个很重要的知识点,是面试中一定会被问到的内容.之前我对闭包的理解主要是"通过闭包可以在函数外部能访问到函数内部的变量",对闭包运用的也很少,甚至自己写过闭包自己 ...

  6. javascript中闭包与作用域的理解

    很多js的框架与插件编写都用到了闭包,所以,阅读和掌握闭包很有必要.最近学习vue框架时,经常会猜想很多功能的native js实现,很多都应用到了闭包,闭包除了目前已知的一些特性,如:可以保持局部变 ...

  7. 转:对JavaScript中闭包的理解

    关于 const     let      var  总结: 建议使用 let  ,而不使用var,如果要声明常量,则用const. ES6(ES2015)出现之前,JavaScript中声明变量只有 ...

  8. JavaScript中闭包之浅析解读

    JavaScript中的闭包真心是一个老生常谈的问题了,最近面试也是一直问到,我自己的表述能力又不能完全支撑起来,真是抓狂.在回来的路上,我突然想到了一个很简单的事情,其实我们在做项目时候,其实就经常 ...

  9. Javascript中闭包问题(转载)

    学习Javascript闭包(Closure)   作者: 阮一峰 日期: 2009年8月30日 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现 ...

随机推荐

  1. MATLAB 2014a 在Mac os x yosemite 10.10 Retina显示模糊的解决的方法

    恐怕非常多童鞋在升级了yosemite之后都遇到了Matlab的问题. 之前转载的一篇文章写了安装的方法,本文说一下解决Retina屏显示模糊的办法. 那么因为Matlab 2014a使用自带的jav ...

  2. 测试用例使用传统excel还是思维导图(Xmind、MindManager等)?

    一.使用感言 实习时随便使用了word文档编写测试用例,也没有人带.后来第一份正式测试工作,也没有人带测试,那时跟着大众学用思维导图写测试用例,发现思维导图非常灵活.目前使用xmind. 使用思维导图 ...

  3. OrCAD16.6中对比两份DSN文件的方法

    OrCAD16.6中对比两份改版前后DSN文件的方法 两种方法: (1)第一种用软件对比netlist (2)用orcad自带的对比功能 一.将两份要对比的原理图都生成orTelesis.dll格式的 ...

  4. [Erlang危机](5.1.1)内存

    原创文章,转载请注明出处:server非业余研究http://blog.csdn.net/erlib 作者Sunface , and some of the hidden data I mention ...

  5. lua math 库

    lua math库 (2012-05-18 17:26:28) 转载▼ 标签: 游戏 分类: Lua atan2.sinh.cosh.tanh这4个应该用不到. 函数名 描述 示例 结果 pi 圆周率 ...

  6. APICloud打包Vue单页应用

    APICloud新建项目后,会生成以下目录结构 其中index.html是入口文件,而vue-cli打包生成的文件是在dist目录下 ├─dist│ └─static│ ├─css│ └─js │ └ ...

  7. (三)spark算子 分为3大类

    ation算子通过sparkContext执行提交作业的runJob,触发rdd的DAG执行 (foreach) foreach(f) 会对rdd中的每个函数进行f操作,下面的f操作就是打印输出没有元 ...

  8. freemarker 开始时间与当前时间进行比较

    <#if startTime?datetime lt .now?datetime>:年月日时分秒比较 <#if startTime?date lt .now?date>:年月日 ...

  9. Creating External Table - KUP-04020

    原因:因为操作系统环境不同,所以换行符也不同,要查看数据文件的换行符 解决方法: 1.如果是苹果系统类的数据文件,则改为:RECORDS DELIMITED BY 0X'0D' 2.如果是window ...

  10. iOS 解决TableView reloadData时cell中图片会闪的问题

    tableView调用reloaddata的时候发现有个小问题,每次刷新图片都会抖动闪烁一下,看着很难受,也影响体验.造成这个问题的主要原因是因为刷新时候切换图片导致.要解决这个问题也很好解决,使用S ...