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 中 document.createEvent的用法
Aug 29 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
微信小程序图片右边加两行文字的代码
Apr 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邮件类
2007/01/03 PHP
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
python多进程操作实例
2014/11/21 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
简单了解什么是神经网络
2017/12/23 Python
python过滤中英文标点符号的实例代码
2019/07/15 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
文员岗位职责
2013/11/09 职场文书
技术人员面试提纲
2013/11/28 职场文书
怎样写好自荐信和推荐信
2013/12/26 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python