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 相关文章推荐
google地图的路线实现代码
Aug 20 Javascript
js弹出的对话窗口永远保持居中显示
Dec 15 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 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
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
php上传图片类及用法示例
2016/05/11 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
浅谈Python的list中的选取范围
2018/11/12 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
Python定时器线程池原理详解
2020/02/26 Python
python实现3D地图可视化
2020/03/25 Python
python实现简单学生信息管理系统
2020/04/09 Python
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
资产经营总监岗位职责
2013/12/04 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
诚实守信演讲稿
2014/09/01 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
财务稽核岗位职责
2015/04/13 职场文书
道歉情书大全
2015/05/12 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
python使用shell脚本创建kafka连接器
2022/04/29 Python
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android