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 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
自动更新作用
Oct 08 Javascript
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
js常用排序实现代码
Dec 28 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
详解JS深拷贝与浅拷贝
Aug 04 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文件中bom的PHP代码
2012/03/13 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
php 基础函数
2017/02/10 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
js setattribute批量设置css样式
2009/11/26 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
2017/02/02 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
layui表格数据重载
2019/07/27 Javascript
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
python追加元素到列表的方法
2015/07/28 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
苹果音乐订阅:Apple Music
2018/08/02 全球购物
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
什么是serialVersionUID
2016/03/04 面试题
投标担保书范文
2014/04/02 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
浅谈Python数学建模之整数规划
2021/06/23 Python