js闭包学习心得总结


Posted in Javascript onApril 17, 2018

首先引用来自官网文档的定义:

closure is the combination of a function and the lexical environment within which that function was declared.

闭包是一个函数和其内部公开变量的环境的集合.

简单而言, 闭包 = 函数 + 环境

第一个闭包的例子

function init() {
 var name = 'Mozilla'; // name is a local variable created by init
 function displayName() { // displayName() is the inner function, a closure
 alert(name); // use variable declared in the parent function 
 }
 displayName(); 
}
init();

because inner functions have access to the variables of outer functions, displayName() can access the variable name declared in the parent function, init().

其实这个栗子很简单,displayName()就是init()内部的闭包函数,而为啥在displayName内部可以调用到外部定义的变量 name 呢,因为js内部函数有获取外部函数中变量的权限。

第二个例子

var data = [
 {'key':0},
 {'key':1},
 {'key':2}
];
function showKey() {
 for(var i=0;i<data.length;i++) {
   setTimeout(function(){
    //console.log(i); //发现i输出了3次3
   //console.log(this); // 发现 this 指向的是 Window
   data[i].key = data[i].key + 10;
   console.log(data[i].key)
   }, 1000);
 }
}
showKey();

上面这个例子可以正确输出 10 11 12 吗?

答案是:并不能,并且还会报语法错误....

console.log(i); 发现i输出了3次3,也就是说,在setTimeout 1000毫秒之后,执行闭包函数的时候,for循环已经执行结束了,i是固定值,并没有实现我们期望的效果。

console.log(this); 发现 this 指向的是 Window,也就是说,在函数内部实现的闭包函数已经被转变成了全局函数,存储到了内存中。

所以需要再定义一个执行函数

var data = [
 {'key':0},
 {'key':1},
 {'key':2}
];
function showKey() {
 var f1 = function(n){
  data[i].key = data[i].key + 10;
  console.log(data[i].key)
 }
 for(var i=0;i<data.length;i++) {
   setTimeout(f1(i), 1000);
 }
}
showKey();
// 得到预期的 10 11 12
Javascript 相关文章推荐
js的写法基础分析
Jan 17 Javascript
详解JS 比较两个Json对象的值是否相等的实例
Nov 20 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 Javascript
图解JS原型和原型链实现原理
Sep 15 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 #Javascript
js实现点击按钮复制文本功能
Jul 20 #Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 #Javascript
React中的render何时执行过程
Apr 13 #Javascript
全站最详细的Vuex教程
Apr 13 #Javascript
vue的常用组件操作方法应用分析
Apr 13 #Javascript
简单的vuex 的使用案例笔记
Apr 13 #Javascript
You might like
php+dbfile开发小型留言本
2006/10/09 PHP
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
js实现右键菜单功能
2016/11/28 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
python打造爬虫代理池过程解析
2019/08/15 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
Python实现简单猜数字游戏
2021/02/03 Python
德国网上药房:Apotal
2017/04/04 全球购物
合作意向书模板
2014/03/31 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
2015年女职工工作总结
2015/05/15 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript