本篇文章我们来学习和讨论一下js中的闭包。闭包是纯函数式编程的一个特性,因为它们能够大大简化复杂的操作。在js中,闭包的重要性不言而喻!

简单的说,闭包(closure)是 一个函数在创建时 允许 该自身函数 访问并操作 该自身函数之外的变量时 所创建的作用域。换句话说,闭包可以让函数访问所有的变量和函数,只要这些变量和函数存在于该函数声明时的作用域内就行。要记住,声明的函数在后续什么时候都可以被调用,即便声明时的作用域消失之后。我们通过下面一小段代码来开始本次学习:

var outerValue="outer";
function outerFunction(){
//调用函数外部变量outerValue
alert(outerValue);
}
//执行outerFunction函数
outerFunction();

我们在同一个作用域内声明一个变量outerValue和函数outerFunction(),可以看见,outerFunction()函数能够访问并操作outerValue变量,这样的代码,我们已经写了无数次,但是却没有意识到其实这正在创建一个闭包。这并不奇怪,因为变量outerValue和函数outerFunction()都是在全局作用域内声明的,该作用域(实际上就是一个闭包)从未消失过(因为页面已经被加载了),不足为奇,该函数outerFunction()可以访问到外部变量outerValue,因为它仍在作用域内并且是可用的。只不过,在这种情况下,即便闭包存在,也不清楚它的好处。

接下来,我们再次演变一下代码:

var outerValue="outer";
var later; function outerFunction(){
var innerValue="inner"; function innerFunction(){
//调用外部函数的innerValue变量
alert(innerValue); //调用外部函数的afterValue变量
alert(afterValue);
}
var afterValue="after"; //将innerFunction函数引用到later
later=innerFunction;
}
//执行outerFunction函数
outerFunction();
//执行innerFunction函数
later(); //inner
//after

当outerFunction()函数执行之后,outerFunction()函数的作用域已经消失了。按照函数的作用域来说,通常,此时的innerValue和afterValue变量已不存在了。但是上面的代码真的是这样执行的吗?当然不是!在outerFunction()函数执行之后,我们将内部函数innerFunction的引用赋值给全局变量later来进行调用。此时,later变量引用的innerFunction函数是可用调用到innerValue和afterValue变量的。为什么?因为闭包!

在外部函数outerFunction中声明内部函数innerFunction的时候,不仅仅是声明了innerFunction函数,还创建了一个闭包,该闭包不仅包含函数声明,还包含了内部函数innerFunction声明的那一时刻点上,外部函数作用域中的所有变量。最终当innierFunction函数执行的时候,外部函数outerFunction的作用域已经消失了,通过闭包,innerFunction函数还是可以访问到原始作用域的。

通过以上代码可以看出:

1、内部函数的参数是包含在闭包中的;

2、内部函数作用域之外的所有变量,即便是函数声明之后的那些声明,也都包含在闭包中。

第二点可以解释为什么当外部函数outerFunction的作用域消失之后,内部函数innerFunction还是可以访问innerValue和afterValue变量。

javascript进阶笔记(3)的更多相关文章

  1. javascript进阶笔记(2)

    js是一门函数式语言,因为js的强大威力依赖于是否将其作为函数式语言进行使用.在js中,我们通常要大量使用函数式编程风格.函数式编程专注于:少而精.通常无副作用.将函数作为程序代码的基础构件块. 在函 ...

  2. javascript进阶笔记(1)

    学习js已经有一段时间了,大大小小还是能够做出一些东西来.不过觉得可惜的是,还是对js本身这门语言不是很熟悉,总有一点雾里看花的感觉,看得见,但是看不清楚.最近发现有一本关于js的叫做<忍者秘籍 ...

  3. #笔记#JavaScript进阶篇一

    #JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象 浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...

  4. JavaScript学习笔记 - 进阶篇(1)- JS基础语法

    前言 JavaScript能做什么? 1.增强页面动态效果(如:下拉菜单.图片轮播.信息滚动等) 2.实现页面与用户之间的实时.动态交互(如:用户注册.登陆验证等) JS进阶篇学习什么? 在JavaS ...

  5. JavaScript进阶--慕课网学习笔记

                         JAVASCRIPT—进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字 ...

  6. 4、JavaScript进阶篇①——基础语法

    一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...

  7. JavaScript基础笔记二

    一.函数返回值1.什么是函数返回值    函数的执行结果2. 可以没有return // 没有return或者return后面为空则会返回undefined3.一个函数应该只返回一种类型的值 二.可变 ...

  8. JavaScript基础笔记一

    一.真假判断 真的:true.非零数字.非空字符串.非空对象 假的:false.数字零.空字符串.空对象.undefined 例: if(0){ alert(1) }else{ alert(2) } ...

  9. Java程序猿的JavaScript学习笔记(汇总文件夹)

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

随机推荐

  1. 算法笔记--最大流和最小割 && 最小费用最大流 && 上下界网络流

    最大流: 给定指定的一个有向图,其中有两个特殊的点源S(Sources)和汇T(Sinks),每条边有指定的容量(Capacity),求满足条件的从S到T的最大流(MaxFlow). 最小割: 割是网 ...

  2. [MySQL]典型的行列转换

    列变成行 测试数据库数据样式: 应用的sql语句: SELECT TM,NAME,SUM(GE) AS 'GE',SUM(GD) AS 'GD',SUM(CT) AS 'CT',SUM(NUM) AS ...

  3. (转+整理)C#中使用GUID

    GUID(全局统一标识符)是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的.通常平台会提供生成GUID的API.生成算法很有意思,用到了以太网卡地址.纳秒级时间.芯片ID码和许多可 ...

  4. Learn Python3 the hard way 第二天总结 命令行(2)

    复制文件 命令:cp含义:很简单,就是把一个文件复制成一个新文件而已.使用 cp -r命令可以复制一些包含文件的目录 移动文件 命令:mv含义:对文件进行"rename". 查看文 ...

  5. Getting started with Processing 第六章总结

    平移,旋转和缩放 前言 在这一章节中,平移.旋转和缩放都是以原点为基准的.并且是通过控制坐标系原点的位置来达到图元平移,旋转.缩放的视觉效果.作者在文中的原话是:另一种在屏幕上改变位置和移动物体的技术 ...

  6. Getting Started with Processing 第五章的easing问题(2)

    程序代码清单如下: float x; float y; float px; float py; float easing = 0.05; void setup(){ size(480,120); st ...

  7. LeetCode--404--左叶子之和

    问题描述: 计算给定二叉树的所有左叶子之和. 示例: 3 / \ 9 20 / \ 15 7 在这个二叉树中,有两个左叶子,分别是 9 和 15,所以返回 24 方法:recursive class ...

  8. 简单记录下3PC

    三PC分为三个阶段:CanCommit,PreCommit, DoCommit 整个分布式系统中,有一个组织者,其他属于参与者,当一个组织者挂了,会从其他可用site中选一个组织者出来,降低阻塞,避免 ...

  9. 『MXNet』第九弹_分类器以及迁移学习DEMO

    解压文件命令: with zipfile.ZipFile('../data/kaggle_cifar10/' + fin, 'r') as zin: zin.extractall('../data/k ...

  10. 【Oracle】【7】去掉字符串中的空格/字符

    SELECT TRIM(' 去除前后空格 ') FROM DUAL; SELECT REPLACE(' 去除 任意位置的空格 ', ' ', '') FROM DUAL; 扩展: 1,both, tr ...