一、闭包!?

  闭包(closure)是Javascript语言的一个难点,对于初学者来说不容易理解,那我们先来看看闭包的含义。

  百度百科与“官方”解释:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

  维基百科:在编程语言中,闭包(也称为词法闭包或函数闭包)是用于在具有第一类函数的语言中实现词法范围名称绑定的技术。

  然而我们看到这些官方的解释并不能很清楚的了解闭包到底是什么鬼东西,只会一头问号,“你在说什么?”。

  其实闭包简单来讲就是能够读取函数内部定义的局部变量的函数,而在Javascript中只有函数内部的子函数才能读取局部变量,所以我们也可以把闭包理解成定义在函数内部的函数。

二、函数的变量

  想要理解闭包,我们就先要了解在函数中的变量,这些变量有自己的作用域。什么是作用域?呐,通常来说,一段程序代码中所用到的名字并不总是有效/可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。

  变量的作用域有两种,一个是全局,一个是局部,也就是我们所说的全局变量和局部变量。  

var a=50;
function fun1(){
alert(a);
}
fun();

  上面这段代码中,a在函数外面定义,所以在函数内部调用变量a自然可以读取它的值。这里的a我们就叫它全局变量。

function fun2(){
var a=50;
}
alert(a);

  而在这段代码中,我们把a定义在函数内部,那么在函数外部调用a的时候,它会报错,告诉你“a  is not defined”,我们找不到a啊?我们定义过a吗?当然定义过啊!只不过它是局部变量而已。

三、如何找到“藏”在函数里的变量

  在我们敲键盘码代码的时候,总会有一些原因,需要我们得到函数内部的局部变量,那么“藏”在函数里的局部变量我们就需要用一种方法把他提取出来。

  那就是在函数内部,我们再定义一个函数。

function fun3(){
var a=50;
function fun4(){
return a;
}
return fun4();
}
//console.log(a); 报错
console.log(fun3());

  在上面这段代码里,我们在fun3里面定义了一个变量a,这样我们在函数fun3外调用a同样会报错找不到它,而对于函数fun3内部的函数fun4来说,a是可以调用的,因外a在函数fun4的外部,反过来fun4内如果定义了一个变量那么fun3是不可调用的。

  这里就又涉及到另一个概念,就是链式作用域,也就是我们说的作用域链。作用域链就是相同的变量名会产生作用域链,访问该变量名称的时候,会首先找本层作用域是否含有该变量,如果没有就去父层作用域去找,最终找到全局变量为止,如果全局变量也找不到该变量,那么就会报错。

  那么如果想在函数fun3外面调用变量a,就要在函数fun3内部再定义一个函数fun4,我们让它返回一下他可以调用的变量a,那么函数fun4的结果就是变量a,那么我们再返回函数fun4,那么我们执行函数fun3,得到的结果就是变量a的值。

  简单来讲,就是只要把fun4作为返回值,我们就可以在fun3外部读取它的内部变量了。

四、调用局部变量(使用闭包)要注意什么?

  1.闭包会使函数里面的变量被保存在内存中,对于内存的消耗非常大,所以不能滥用闭包,否则网页的性能会降低。

  2.不要随便改变父函数内部变量的值。

  最后总结一下,闭包就是能够读取其他函数内部变量的函数,能够让我们在父级函数外调用父级函数内的变量,有代码的情况下理解起来其实不难,重要的是在变化莫测的代码中,闭包具体的应用还是需要我们真正的理解它才可以熟练应用。

    

Javascript中的闭包 O__O "…的更多相关文章

  1. 让你分分钟学会Javascript中的闭包

    Javascript中的闭包 前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它 ...

  2. 难道这就是JavaScript中的"闭包"

    其实对于JavaScript中的"闭包"还没真正理解,这次在实际Coding中似乎遇到了"闭包"的问题,仅此摘录,以待深究. 表现为jQuery的post方法回 ...

  3. 浅谈JavaScript中的闭包

    浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...

  4. javascript中的闭包解析

    学习javaScript已经有一段时间了,在这段时间里,已经感受到了JavaScript的种种魅力,这是一门神奇的语言,同时也是一门正在逐步完善的语言,相信在大家的逐步修改中,这门语言会逐步的完善下去 ...

  5. JavaScript中的闭包理解

    原创文章,转载请注明:JavaScript中的闭包理解  By Lucio.Yang 1.JavaScript闭包 在小学期开发项目的时候,用node.js开发了服务器,过程中遇到了node.js的第 ...

  6. 【JS】JavaScript中的闭包

    在JavaScript中,闭包指的是有权访问另一个函数作用域中的变量的函数:创建闭包最常见的方式就是在一个函数内创建另一个函数.如下例子: function A(propertyName){ retu ...

  7. Javascript中的闭包(转载)

    前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.下面是作者从作用域链慢慢讲到 ...

  8. 狗日的Javascript中的闭包

    前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.下面是作者从作用域链慢慢讲到 ...

  9. [译]Javascript中的闭包(closures)

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

随机推荐

  1. Hybrid APP架构设计思路

    通讯 作为一种跨语言开发模式,通讯层是Hybrid架构首先应该考虑和设计的,往后所有的逻辑都是基于通讯层展开. Native(以Android为例)和H5通讯,基本原理: Android调用H5:通过 ...

  2. jq回车触发绑定点击事件

    //jq绑定回车事件触发点击事件<script> $(function(){ $(document).keyup(function(event){ if(event.keyCode ==1 ...

  3. oracle数据库中字符乱码

    1.1         88.152 os已安装中文包,以下确认os层面中文是否可以显示 1.2         88.153 os没有安装中文包,以下确认os层面中文无法显示 1.3         ...

  4. Oracle EBS SLA 详解(转)

    原文地址: Oracle EBS SLA 详解

  5. MySql(九)索引

    一.索引的介绍 数据库中专门用于帮助用户快速查找数据的一种数据结构.类似于字典中的目录,查找字典内容时可以根据目录查找到数据的存放位置吗,然后直接获取. 二 .索引的作用 约束和加速查找 三.常见的几 ...

  6. Jmeter的使用简介及实例

    一.安装及配置环境1.安装   java环境   该软件需要java环境,安装jdk,在百度自行查找安装   环境变量配置:变量名JAVA_HOME 值:jdk的安装路径                ...

  7. loj 10004 智力大冲浪

    智力大冲浪 题目描述: 小伟报名参加中央电视台的智力大冲浪节目.本次挑战赛吸引了众多参赛者,主持人为了表彰大家的勇气,先奖励每个参赛者m元.先不要太高兴!因为这些钱还不一定都是你的.接下来主持人宣布了 ...

  8. 九校模拟——餐馆(restaurant)

    1 餐馆(restaurant) 1.1 题目背景 铜企鹅是企鹅餐馆的老板,他正在计划如何使得自己本年度收益增加. 1.2 题目描述 共有n 种食材,一份食材i 需要花ti 小时不间断地进行播种,施肥 ...

  9. 基于spring的PropertySource类实现配置的动态替换

    public class ConfigPropertySource extends PropertySource<Properties> implements PriorityOrdere ...

  10. Java 9中新的货币API

    译文出处: Java译站   原文出处:Michael Scharhag JSR 354定义了一套新的Java货币API,计划会在Java 9中正式引入.本文中我们将来看一下它的参考实现:JavaMo ...