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 相关文章推荐
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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
Syphon 秘笈
2021/03/03 冲泡冲煮
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python调用java的Webservice示例
2014/03/10 Python
Python实现的弹球小游戏示例
2017/08/01 Python
python让列表倒序输出的实例
2018/06/25 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
QML用PathView实现轮播图
2020/06/03 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
技校生自我鉴定
2013/12/08 职场文书
法律进机关实施方案
2014/03/12 职场文书
社会调查研究计划书
2014/05/01 职场文书
委托书的写法
2014/08/30 职场文书
忠诚教育心得体会
2014/09/03 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
2015年教师新年寄语
2014/12/08 职场文书
奖学金个人总结
2015/03/04 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
Nginx 匹配方式
2022/05/15 Servers