【javascript基础】由demo来进阶学习闭包等概念
Demo 1：闭包初识
先要认识几点现实：
- 函数外部无法访问函数内部的局部变量。
- 函数内的嵌套函数可以访问函数的局部变量
- 将嵌套函数作为闭包返回到外部空间，外部空间通过执行返回的嵌套函数可以实现外部空间对函数内部局部变量的间接访问。
关于闭包的定义及特殊性
函数在创建它的环境之外执行，那么它就是闭包。
如上例子中，函数displayName 如果在创建它的环境中：makeFunc函数内执行，则不叫闭包了。
闭包会记住创建它的环境。创建它的环境包含所在环境的局部变量，这也就是说为什么闭包能够使得外部空间访问到函数的局部变量的原因，同时也是发生内存泄漏的导火索。
Demo 2 : 返回闭包——函数工厂
上面的例子我们认识到:
* function可以不用写方法名。
* 两次对makeAdder的调用，虽然是同一makeAdder函数，但是对于返回的闭包来说，创建闭包的环境是二者是独立的，没有瓜葛。
Demo 3:闭包使用场景之：模拟私有方法
var counter=(function() {var privateCounter=0;function changeBy(val) {privateCounter += val;}return {increment:function() {changeBy(1);},decrement:function() {changeBy(-1);},value:function() {return privateCounter;}}
})();咋一看，看不懂，那么像剥洋葱一样一层层的解析：
第一层: （function() {….}）()
我可以如此改写一下：
var makeCounter = function() {var privateCounter=0;function changeBy(val) {privateCounter += val;}return {increment:function() {changeBy(1);},decrement:function() {changeBy(-1);},value:function() {return privateCounter;}}
}var counter = makeCounter();为什么难看懂呢？就是因为将上面两步合成了一步。使用句式是：
（function() {....}）()定义闭包和执行闭包一块做了，确实奇特！
其他类似的例子
(function(global) {var env = global;(function(destroyInstance) {destroyInstance( % s)})(env.destroyInstance)
})(this)第二层 深入闭包内部
关注一下闭包的返回:
return {increment:function() {changeBy(1);},decrement:function() {changeBy(-1);},value:function() {return privateCounter;}}这返回的其实是一个对象。而在js中对象的定义是什么样的呢？
js对象的定义
var lennon={name:"John",year:1940}只不过上面的demo中，每个value对应的值都是一个闭包而已。
这样写的好处是什么呢？
counter拿到了对象，那么外部空间只能调用到对象的increment，decrement，value属性，但是却无法直接调用到changeBy，privateCounter，他们被隐藏起来了，类似于java类中的private.
使用闭包时的常见问题
循环中创建闭包
问题的关键在于：
- 闭包保留并可访问创建它的环境数据，在这里就是函数setupHelp内的数据。
- 循环结束后，item指向了列表的最后一个。
- 红框中的闭包在实际执行的时候，使用了函数setupHelp当前的item，也就是列表中的最后一个。
- 当三个输入框点击的时候，显示的内容都是最后一个item.hel的内容。
如何解决呢？
- 增加上下文环境来保留与之相对应的item数据，在这里增加了makeHelpCallback函数来封装了一层。
性能问题
除非必须，勿用闭包，对性能影响大。
参考资料
http://edu.csdn.net/course/detail/800/10909?auto_start=1
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
【javascript基础】由demo来进阶学习闭包等概念相关推荐
- JavaScript基础知识总结 14：学习JavaScript中的File API、Streams API、Web Cryptography API
目录 一.Atomics和SharedArrayBuffer 二.原子操作基础 1.算术及位操作方法 2.原子读和写 3.原子交换 4.原子Futex操作与加锁 三.跨上下文消息 四.Encoding ...
- javascript基础知识系列：DOM学习
访问节点: 短距离的旅行: parentNode:获得父节点. firstChild:获得第一个子节点. lastChild:获得子节点的最后一个. 访问节点的文本: var x=[a.paragr ...
- JavaScript基础教程新手入门必看
对前端稍微有点了解的初学者都知道,JavaScript是必不可少的工具.毫不夸张的说,大部分网页都使用了JavaScript,想要成为一个优秀的前端工程师,做出漂亮令用户满意的网页,熟练掌握JavaS ...
- JavaScript基础入门-陈璇-专题视频课程
JavaScript基础入门-397人已学习 课程介绍 本课包括ECMAScript.流程控制.函数.内置对象.JS调试.JS面试内容,从零带你逐步提升JS技能! 课程收益 了 ...
- javascript基础知识大全
发些javascript基础知识,便于大家学习,也便于我自己查看 1.javascript的数组API [js] <pre>//定义数组 var pageIds = new Arr ...
- JS学习笔记（JavaScript基础学习必备）
讲解JavaScript 基础语法.关键特性.JSON.WebAPI 等知识点.涉及网页窗口交互的方法以及通过 DOM 进行网页元素的相关操作. 文章目录 一.JavaScript 基础 1.什么是 ...
- 前端小白学习路线及知识点汇总（三）-- JavaScript基础
前端小白学习路线及知识点汇总(三)-- JavaScript基础 一. JavaScript的组成 ECMAScript:由ECMA国际进行标准化的一门编程语言,往往被称为JavaScript或Jsc ...
- 尚硅谷JavaScript高级教程(javascript实战进阶)学习笔记
前言 这个是我学习过程中的笔记,分享给大家,希望对大家有用. 学习内容是尚硅谷JavaScript高级教程(javascript实战进阶),这里是视频链接. 我在前面有两篇对于web前端HTML和CS ...
- javaScript基础学习 - 14 - JavaScript内置对象 -案例代码
javaScript基础学习 - 14 - JavaScript内置对象 -案例代码 1. Math对象最大值 2. 封装自己的数学对象 3. Math绝对值和三个取整方法 4. Math对象随机数方 ...
最新文章
- 男神女神配——alpha阶段总结
- 即时通讯软件设计(一)
- 中石油2018年秋季C语言 试卷答案,[石油华东]《数据采集系统》2018年秋季学期在线作业...
- python中import os_python import osgeo.gdal出错
- Spring boot （5）：Spring data jpa 的使用
- SpringBoot官方提供的starter pom
- 带你尝鲜LiteOS 组件EasyFlash
- PyTorch 1.0 中文官方教程：可选：数据并行处理
- 《平衡掌控者 游戏数值战斗设计》学习笔记（一）游戏研发概要
- chrome保存网页为图片
- 痛惋字幕组：想为正版付费，但没地方掏钱
- 我问我自己，你究竟想成为一个什么样的人？
- linux之mail命令发邮件
- 网页制作学习3----实现连缀功能
- linux下磁盘测速,linux下磁盘测速工具
- docker-compose up命令
- 大学计算机作业互评评语简短,大学学生互评评语100字
- 大海航行靠舵手，FONE将把财务数字化的航船带向何方？
- python股票数据分析_Python数据分析之股票走势
- 计算机基础三: 二进制减法实现