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 prototype,executing,context,closure
Dec 24 Javascript
javascript写的一个链表实现代码
Oct 25 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
Vuex mutitons和actions初使用详解
Mar 04 Javascript
解决layui table表单提示数据接口请求异常的问题
Sep 24 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
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
PHP网络操作函数汇总
2015/05/18 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
javascript数组使用调用方法汇总
2007/12/08 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
js比较日期大小的方法
2015/05/12 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
完善的jquery处理机制
2016/02/21 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
python逐行读取文件内容的三种方法
2014/01/20 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
Python类成员继承重写的实现
2020/09/16 Python
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
高中生家长会演讲稿
2014/01/14 职场文书
《乌塔》教学反思
2014/02/17 职场文书
周年庆促销方案
2014/03/15 职场文书
社会实践活动总结报告
2014/04/29 职场文书
英语求职信范文
2014/05/23 职场文书
社会实践活动总结范文
2014/07/03 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
检察院起诉意见书
2015/05/20 职场文书
唐山大地震观后感
2015/06/05 职场文书
保护动物的宣传语
2015/07/13 职场文书