JavaScript 中级笔记 第四章 闭包
发布时间:2024-04-18 10:53:09
标签:JavaScript,中级笔记,闭包
5,闭包
闭包意味着内层的函数可以引用存在于包围它的函数内的变量,即使外层函数的执行已经终止。
让我们先来看一个闭包的例子。
<script type="text/javascript"> function add(num){ return function(toAdd){ return num+toAdd; //代码① } } var addFive = add(5); //此时addFive为function(toAdd){return num+toAdd;} var count = addFive(3); //此时count为 num+toAdd alert(count);//8 </script>
代码①是处于函数内层,不过它可以使用外层的变量num。
闭合还能解决另一个常见的Js问题,全局变量的影响。
通过自动执行匿名函数组合闭包,便可把原本属于全局的变量隐藏起来。看下面的例子:
<script type="text/javascript"> (function(){ var msg = "Hello"; window.onunload = function(){ alert(msg);//输出Hello } })() //alert(msg);//出现未定义 </script>
在使用setTimeout时,我们经常也用上了闭包。
<html> <head> <title>demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> window.onload = function(){ var obj = document.getElementById("abc"); obj.style.border = "1px solid #000"; setTimeout(function(){ obj.style.color = "red"; },1000) function DeAlert(msg , time){ setTimeout( function(){ alert(msg); },time) } DeAlert("hello",2000); } </script> </head> <body> <div id="abc">CssRain</div> </body> </html>
以这种方式使用setTimeout(),可以避免一些问题。
当然使用闭包 也会带来一些问题。如下代码所示:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> window.onload = function(){ var ul = document.getElementById("abc"); var li = document.getElementsByTagName("li"); for(var i=0;i<li.length;i++){ li[i].onclick = function(){ alert("你单击的是第"+i+"个li。"); } } } </script> </head> <body> <ul id="abc"> <li>AAA</li> <li>BBB</li> <li>CCC</li> </ul> </body> </html>
单击li弹出的序号为 3 ,并不是正确的序号,它引用的值是最后一次的赋值。
我们可以使用下面代码来解决:
<script type="text/javascript"> window.onload = function(){ var ul = document.getElementById("abc"); var li = document.getElementsByTagName("li"); for(var i=0;i<li.length;i++){ (function(){ //使用一个自执行的匿名函数 来激发出作用域 var b = i ; //记住在这个作用域内的值 li[b].onclick = function(){ //使用刚才记住的值,变量b alert("你单击的是第"+b+"个li。"); } })() } } </script>
通过使用闭包对作用域的控制,从而符合了我们的要求。
上面的代码可以分解为:
<script type="text/javascript"> window.onload = function(){ var ul = document.getElementById("abc"); var li = document.getElementsByTagName("li"); function a(){ var b = 0 ; li[b].onclick = function(){ alert("你单击的是第"+b+"个li。"); } } function b(){ var b = 1 ; li[b].onclick = function(){ alert("你单击的是第"+b+"个li。"); } } function c(){ var b = 2 ; li[b].onclick = function(){ alert("你单击的是第"+b+"个li。"); } } a(); b(); c(); } </script>
闭包的概念不容易掌握,我也是花了大量时间和精力才理解。
6,小结
笔记(2),(3),(4)讲解了 JavaScript中的几个重要的内容,包括引用,函数重载,作用域,上下文对象和闭包。
引用的关键内容: 指针,数组引用,字符串引用,区别,传值,传址。
函数重载的关键内容: 参数的数量,参数的类型,arguments,伪数组,typeof,constructor,区别-字符串和对象。
作用域的关键内容: 函数划分,全局作用域,全局对象,window对象的属性,局部作用域,显式声明,隐式声明。
上下文对象的关键内容: this变量,call,apply,参数区别,数组。
闭包的关键内容: 内层函数,外层函数,变量,setTimeout,闭包问题,最后一次的赋值,闭包和作用域。
0
投稿
猜你喜欢
- 模板继承是ThinkPHP3.1.2版本添加的一项更加灵活的模板布局方式,模板继承不同于模板布局,甚至来说,应该在模板布局的上层。模板继承其
- 两种写法。如图,4种重合情况和2种不重合情况。第一种写法:-- 时间段 a,b SELECT * FROM table WHER
- 用div+css制作页面,想实现左右两部分固定宽度,而中间部分不固定,并随着屏幕分辨率的的变化而自动伸缩。大家可知道应该如何实现? &nbs
- 1. 关于 try.. finally..假如上帝用 python 为每一个来到世界的生物编写程序,那么除去中间过程的种种复杂实现,最不可避
- 耦合两个或以上的体系或两种运动形式间相互作用而彼此影响以至于联合起来的现象。在软件工程中,对象之间的耦合度就是对象之间的依赖性,对象之间的耦
- 现有两个元组(('a'),('b')),(('c'),('d')),请使用p
- 本文实例讲述了python随机生成指定长度密码的方法。分享给大家供大家参考。具体如下:下面的python代码通过对各种字符进行随机组合生成一
- 当列表菜单项目特别多的时候,使用JavaScript手风琴菜单(Accordion Menus)是个不错的选择。手风琴折叠菜单利于组织菜单项
- 前提:list以及array是python中经常会用到的数据类型,当需要对list以及array进行文件的读写操作的时候,由于write函数
- 前言上一节我们讲解了数据类型以及字符串中几个需要注意的地方,这节我们继续讲讲字符串行数同时也讲其他内容和穿插的内容,简短的内容,深入的讲解。
- 前言:python利用matplotlib库中的plt.ion()函数实现即时数据动态显示:1.非定长的时间轴代码示例:# -*- codi
- 如果你看过YUI的RAW源码,会发现很多跟javadoc语法类似的注释。据说(via)是使用JSDoc这个工具。但我探索了一遍,发现YUI多
- 1. 目的每次新配置 Ubuntu 系统,免不了配置 apt 源。尽管可以通过 GUI 界面进行选择,但自动化程度不够,不同桌面(Unity
- Python 变量类型变量存储在内存中的值。这就意味着在创建变量时会在内存中开辟一个空间。基于变量的数据类型,解释器会分配指定内存,并决定什
- 谷歌的potobuf不说了,它很牛B,但是对客户端对象不支持,比如JavaScript就读取不了。Jil很牛,比Newtonsoft.Jso
- 世界疫情数据下载请点击》》:疫情数据下载注:此数据是2022年3月12号的结果,其中透明的地方代表确诊人数小于10万人,白色的地方代表无该国
- 同伪类的方式类似,伪元素通过对插人到文档中的虚构元素进行触发,从而达到某种效果。在CSS1里,有两个伪元素,即:first-letter和f
- 从去年六一儿童节的LOGO开始,我们就要求以后的每一个节日FLASH LOGO设计时除了具备创意故事外,还必须设计一个小的互动效果,当受众把
- 本文实例讲述了python迭代器常见用法。分享给大家供大家参考,具体如下:迭代器迭代是访问集合元素的一种方式。迭代器是一个可以记住遍历的位置
- 一、Pyeharts简介pyecharts 是一个用于生成 Echarts 图表的类库。用 Echarts 生成的图可视化效果很不错,pye