JS核心知识点梳理——闭包

闭包

闭包这个东西咋说呢,不同的程序员,不同的资料都有不同的解释,你可以把它理解成一个函数,也可以把它理解函数+执行环境。

我们这里不纠结闭包的定义,而是关注闭包的现象,应用,再结合相关面试题去攻克它,最后谈一下我对闭包的理解。

现象

之前说过,函数执行,生成执行环境,函数执行完,销毁执行环境。嗯,听上去很正常,不用的东西就销毁嘛。

但是如果函数执行完,该函数上下文还用怎么办,有用的东西肯定不敢销毁了,这个就是闭包的现象,那么引起这个现象的鄙人就把它理解成闭包!

 1 function foo () {
 2     var a = 1
 3     return function bar () {
 4         a++
 5         console.log(a)
 6     }
 7 }
 8 var b = foo() //函数执行完,我就问你foo的上下文你敢销毁吗?
 9 b()  //  2
10 b()  //  3

大家看到foo执行完的结果赋值给了b,也就是函数bar赋值给了b,未来我可能让b执行,也就是让bar执行,所以我需要保证让bar能访问上下文不被销毁。bar能访问的上下文实际上是foo执行的上下文。所以foo执行完以后的上下文不会被销毁,会继续存在。

我的理解是 函数向外层作用域暴露出来一个内部引用,那么就存在闭包现象。(真的没有必要纠结闭包到底是啥,是函数?内部整体?)

应用

以下代码的功能是要实现为5个input按钮循环绑定click点击事件,绑定完成后点击1、2、3、4、5五个按钮分别会alert输出0、1、2、3、4五个字符。(腾讯)

请问如下代码是否能实现?

如果不能实现那么现在的效果是什么样的?

应该做怎样的修改才能达到我们想要的效果,并说明原理?

 1 <div id="btnBox">
 2     <input type="button" value="button_1" />
 3     <input type="button" value="button_2" />
 4     <input type="button" value="button_3" />
 5     <input type="button" value="button_4" />
 6     <input type="button" value="button_5" />
 7 </div>
 8 <script type="text/javascript">
 9     var btnBox=document.getElementById(‘btnBox‘),
10     inputs=btnBox.getElementsByTagName(‘input‘);
11     var l=inputs.length;
12     for(var i=0;i<l;i++){
13         inputs[i].onclick=function(){
14             alert(i);
15         }
16     }
17 </script>

解决思路1:没有块作用域,我就用es6的let形成块作用域

1 for(let i=0;i<l;i++){
2      inputs[i].onclick=function(){
3              alert(i);
4      }
5 }

解决思路2:每次绑定的时候i其实都是正确的,我能不能用另外一个变量将每次的i存起来呢?

1 //这样行吗?
2 for(var i=0;i<l;i++){
3         inputs[i].onclick=function(){
4             var num = i
5             alert(num);
6         }
7     }
8 //这样还是不行,因为回调函数定义的时候并不会执行,所以当var num = i  执行的时候i已经等于5了

那么我就让回调函数定义的时候里面的代码能立即执行,接收到参数0,1,2,3,4

1 for(var i=0;i<l;i++){
2         inputs[i].onclick=(function(){
3             var num = i
4             alert(num);
5         })(i)
6     }
7 //这样也有问题i传递进去了,但是里面核心代码定义也执行了,我想让它点击的时候再执行
1 for(var i=0;i<l;i++){
2         inputs[i].onclick=(function(){
3             var num = i
4             return function (e) { //注意这个时候e是啥,是点击的事件
5                 console.log(num)
6             }
7         })(i)
8     } //这样就没毛病了,返回一个方法,不会立即执行,i传进去了,给了num,由于有闭包,又不会被销毁,完美

原文地址:https://www.cnblogs.com/benmumu/p/11208048.html

时间: 2024-10-30 06:23:51

JS核心知识点梳理——闭包的相关文章

JS函数知识点梳理

要想学好JavaScript除了基本的JavaScript知识点外,作为JavaScript的第一等公民--函数,我们要深入的了解.函数的多变来源于参数的灵活多变和返回值的多变.如果参数是一般的数据类型或一般对象,这样的函数就是普通函数:如果函数的参数是函数,这就是我们所要知道的高级函数:如果创建的函数调用另外一部分(变量和参数已经预置),这样的函数就是偏函数. 此外,还有一点就是可选参数(optional parameter)的使用. 函数的分类 普通函数 有函数名,参数,返回值,同名覆盖.示

jquery知识点梳理

jQuery知识点梳理 一.              jquery选择器 基本选择器 ID选择器 类选择器 标记选择器 分组选择器 通配符选择器 层次选择器 $(“ancestor descendent”):祖先后代选择器    空格 $(“parent > child”):父子选择器   大于 $(“prev + next”):相邻后兄弟元素选择器   加号 $(“prev ~ siblings”):所有后兄弟元素选择器  波浪线 过滤选择器:基本过滤选择器 :first.:last.:od

Web前端开发——JS技术大梳理

什么是JS JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称 为javascript引擎,为浏览器的一部分,广泛用于客户端的脚本语言.JavaScript 是一种具有面向对象能力的.解 释型的程序设计语言.更具体一点,它是基于对象和事件驱动并具有相对安全性的客户端脚本语言. 因为他不需要 在一个语言环境下运行,而只需要支持它的浏览器即可.它的主要目的是,验证发往服务器端的数据.增加 Web互 动.加强用户体验度等. 下面对js从整体的角

JS重要知识点

这里列出了一些JS重要知识点(不全面,但自己感觉很重要).彻底理解并掌握这些知识点,对于每个想要深入学习JS的朋友应该都是必须的. 讲解还是以示例代码搭配注释的形式,这里做个小目录: JS代码预解析原理(包括三个段落): 函数相关(包括 函数传参,带参数函数的调用方式,闭包): 面向对象(包括 对象创建.原型链,数据类型的检测,继承). JS代码预解析原理 /****************** JS代码预解析原理 ******************/ /* JS代码预解析.变量作用域.作用域

Javascript重要知识点梳理

Javascript重要知识点梳理 说明 Javascript流程控制 js中常用的数据类型 var关键字的使用 if – else if – else switch while for Javascript常用函数 1.  字符串函数 substring indexOf lastIndexOf charAt replace split toLowerCase toUpperCase 2.  数学运算函数 3.  数据类型转换函数 parseInt parseFloat Math.abs Mat

MyBatis 知识点梳理

简单地梳理下MyBatis相关的知识点,主要想让自己重新捡起以前学的框架,如果能给广大程序猿朋友有所帮助那就更好了.有疏漏的地方也欢迎大家评论指出.闲言少叙,进入正题....... MyBatis知识梳理 简介(百度,随便看看) MyBatis最早源自Apache基金会的一个开源项目iBatis,2010年这个项目有Apache software foundation迁移到了google code,并且改名为MyBatis. MyBatis是支持普通SQL查询,存储过程和高级映射的优秀持久层框架

js基础知识点总结

js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避免全局变量和方法(命名空间,闭包,面向对象),模块化(seaJs,requireJs) 常用内部类:Data Array Math String HTML属性,CSS属性HTML:属性.HTML属性="值":CSS:对象.style.CSS属性="值"; class和f

javascript系列之核心知识点(一)

JavaScript. The core. 1.对象 2.原型链 3.构造函数 4.执行上下文堆栈 5.执行上下文 6.变量对象 7.活动对象 8.作用域链 9.闭包 10.this值 11.总结 这篇文章是"ECMA-262-3 in detail"系列的一个摘要和总结.每一部分包含了对应章节的连接引用,所以你可以仔细去阅读得到一个更深刻的理解.适合的读者:资深程序员,专家.我们从探讨对象的概念开始,这也是ECMAScript的奠基石. 对象 ECMAScript,一个高度抽象的面向

[独孤九剑]Oracle知识点梳理(十)%type与%rowtype及常用函数

本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracle知识点梳理(四)SQL语句之DML和DDL [独孤九剑]Oracle知识点梳理(五)数据库常用对象之Table.View [独孤九剑]Oracle知识点梳理(六)数据库常用对象之Procedure.function.Sequence [独孤九剑]Oracle知识点梳理(七)数据库常用对象之Curs