`

一段闭包的例子,以及我自己的理解

 
阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Document</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type='text/css'>
.a {
	width: 200px;
	font-size: 12px;
	font-weight: bold;
	height: 30px;
	line-height: 30px;
	background: url(/images/default/header_bg.gif);
	margin-top: 5px;
}

.a a {
	text-Decoration: none;
}

.aa {
	width: 200px;
	height: 100px;
	border: 3px groove #91D2FF;
	display: none;
}
</style>
</HEAD>
	
<BODY>
	<!--class=a的点击div,title和下面div的id对应-->
	<div id="a" title="a1" class='a'>
		<a href='#'>+ 点击显示 </a>
	</div>
	<div id="a1" class='aa' style='display: block'>aaaaaaaaaaaaaaaa</div>
	
	<!--class=a的点击div,title和下面div的id对应-->
	<div id="b" title="b1" class='a'>
		<a href='#'>+ 点击显示 </a>
	</div>
	<div id="b1" class='aa'>bbbbbbbbbbbbbbbbbbbbbb</div>

	<!--class=a的点击div,title和下面div的id对应-->
	<div id="c" title="c1" class='a'>
		<a href='#'>+ 点击显示 </a>
	</div>
	<div id="c1" class='aa'>ccccccccccccccccccccc</div>

	<!--class=a的点击div,title和下面div的id对应-->
	<div id="d" title="d1" class='a'>
		<a href='#'>+ 点击显示 </a>
	</div>
	<div id="d1" class='aa'>dddddddddddddddddddddd</div>
	<SCRIPT LANGUAGE="JavaScript">
	<!--
		var Each = function(a, fn) {
			for ( var i = 0; i < a.length; i++)
				//call方法能改变方法调用时this的指向----将每一个div用call传入function变量后,div对象将成为this
				fn.call(a[i]);
		}
		var $ = function(s) {
			return s.charAt ? document.getElementById(s)
					: (typeof (s) == 'object') ? s : null;
		}
		var Show = function(obj) {
			//闭包一直操作的数组变量
			var divs = [ $(obj), '' ];
			return function() {
	
				//向divs数组的开头添加新的要显示的div,于是上次显示的div就成为了divs[1]
				divs.unshift($(this.title));  //在html元素的onclick绑定show以后,this就代表onclick的owner---html元素本身
				
				console.log(divs);

				divs.length = 2;
				$(this.title).style.display = 'block';
				try {
					//隐藏上次显示的div
					divs[1].style.display = 'none';
				} catch (e) {
				}
			}
		}
		window.onload = function() {
			var show = Show('a1');
			Each(document.getElementsByTagName('div'), function(a, b) {
				//给每个class=a的div绑定show函数,show函数又返回一个内部函数的变量。
				//于是,每一个匿名函数的变量都被外界第三者(即div)引用着,所以方法执行外之后它不会被销毁,而且它从属的show方法的变量也同样没有被销毁,进而show方法的divs数组变量就也没有被销毁,
				//由此形成闭包-----使外界可以操作show函数内部的divs数组,并让divs数组的值始终保持在内存中。
				//于是,这样就能够用一份数组一直记录着当前显示的div,然后点击显示下一个div时,再用新的去覆盖旧的,由此来实现功能。
				//这个代码这么写的目的应该是:
				//1.可以有针对性地对要隐藏的div进行单独操作。老套的做法是:当一个显示,就隐藏所有其他的。如果是较庞大的页面的话,这样操作效率就不高了。
				//2.将divs数组封装了起来,避免了外界对它的误操作。
				//3.能显得自己比较高深,哈哈,开下玩笑。
				if (this.className == 'a') {
					this.onclick = show;
				}
			})
		}
	//-->
	</SCRIPT>
</BODY>
</HTML>
 

代码的原址: http://www.jb51.net/article/17628.htm

0
0
分享到:
评论

相关推荐

    闭包的理解

    这段代码中包含了一个立即执行的函数表达式(IIFE),它接收一个参数`$`,在这个例子中,`$`实际上是jQuery的对象。在这个IIFE内部,首先定义了一个名为`problemWo`的方法,并将其绑定到`$`对象上。接着,使用`$....

    js闭包理解之倒计时

    在这个“js闭包理解之倒计时”的主题中,我们将深入探讨如何利用闭包实现一个实际项目中的倒计时功能。 首先,让我们了解一下闭包的基本概念。在JavaScript中,每当函数被创建时,它都会形成一个闭包,这个闭包包含...

    Swift语言利用Closure闭包实现反向传值Demo

    在Swift中,Closure(闭包)是一种非常重要的特性,它允许我们定义一段可移动和可重用的代码块,可以捕获和存储其所在上下文的变量。在本Demo“Swift语言利用Closure闭包实现反向传值Demo”中,我们将深入探讨如何...

    Swift 中的闭包和 Objective-C 中的Block

    闭包在Swift中是一种强大的工具,它允许我们将一段代码包装起来作为一个独立的实体,可以在程序的任何地方传递和调用。闭包可以捕获和存储其所在上下文中的常量和变量,这被称为“闭包捕获”。Swift中的闭包表达式...

    swift_函数和闭包

    函数是执行特定任务的一段可重用代码。在Swift中,你可以通过定义函数来创建自己的功能库。函数由函数名、参数列表和返回类型组成。以下是一个简单的函数示例: ```swift func greet(name: String) -&gt; String { ...

    Swift闭包学习

    闭包(Closure)可以理解为一段能够捕获并存储其所在上下文中变量的代码块,它可以作为参数传递,也可以作为返回值。在Swift中,闭包的使用使得函数式编程风格得以实现,极大地增强了代码的灵活性和可读性。 首先,...

    JS 第16章 匿名函数和闭包

    例如,可以使用匿名函数来立即执行一段代码,或者利用匿名函数处理数组的排序和映射等操作。 描述中提到,了解匿名函数和闭包对于深入理解JavaScript至关重要。这个章节将帮助我们提升对JavaScript的理解。对于初学...

    传递闭包实现

    为了更好地理解传递闭包,我们可以通过两个例子来加以说明: 1. **人类祖先关系**:设\(X\)是所有活着或者已经去世的人的集合,而\(R\)是关系“为父于”。在这种情况下,\(R\)的传递闭包就是“\(x\)是\(y\)的祖先”...

    IOS swift3.0 下闭包语法整理

    Swift中的闭包是一种强大的编程工具,它允许你封装一段代码并作为一个值来使用。在iOS开发中,特别是在Swift 3.0中,闭包经常被用于处理回调、异步操作和对象间的通信。以下是关于Swift 3.0下闭包语法的详细说明: ...

    javascript变量提升和闭包理解

    4. **变量共享**:闭包中的变量是共享的,因此在一个闭包中对变量的修改会影响到其他所有引用该变量的闭包。 掌握JavaScript变量提升和闭包的知识对于编写高效的JavaScript代码至关重要。理解变量提升能够帮助...

    什么是js闭包

    在这段代码中,`nAdd`函数虽然不是闭包的一部分,但它同样是一个函数,能够修改`f1`函数内的局部变量`n`。通过这种方式,`n`的值可以在多次调用之间保持不变。 #### 总结 闭包是JavaScript中一个非常重要的概念,...

    讲义13闭包高级技术.docx

    下面是一个闭包的例子: ```javascript function outerFunction() { var outerVar = 'I am outside!'; return function innerFunction() { console.log(outerVar); }; } var closureReference = outer...

    学习Javascript闭包

    闭包是JavaScript语言中一个重要的概念,也是理解和掌握高级编程技巧的关键之一。本文将基于阮一峰的文章《学习JavaScript闭包》进行深入探讨,旨在帮助读者理解闭包的基本概念及其应用场景。 #### 二、变量的作用...

    Swift视频教程 基础语法系列 闭包sorted函数

    闭包是Swift中的一个核心特性,它允许你定义一段可传递的代码块。闭包可以捕获并存储其所在上下文的常量和变量,这被称为闭包环境。在Swift中,闭包表达式提供了一种简洁的方式来编写闭包,它们可以作为参数传递给...

    使用XMLHTTPRequest实现自定义ajax。javascript闭包模式写法。值的学习

    在这个例子中,`createAjax`函数返回了一个新的函数,这个函数封装了实际的Ajax请求。由于内部的xhr对象被闭包保护,即使在外部调用,也不会被其他代码污染或意外修改。当调用`myAjax`时,它会发送一个GET请求到指定...

    深入理解javascript作用域和闭包

    下面是一个闭包的例子: ```javascript function createClosure() { var name = "jack"; return { setStr: function() { name = "rose"; }, getStr: function() { return name + ":hello"; } }; } var ...

    JavaScript中消除闭包的一般方法介绍

    这通常用于立即执行一段代码,并在执行的同时初始化一个闭包。但是,我们可以将代码稍作修改,从而不依赖闭包。 ```javascript var obj = (function() { var n = 0; return { func: function() { n++; return ...

    一道JS前端闭包面试题解析

    接着,文档通过一段代码来详细说明了闭包的工作原理,解释了变量作用域是在函数定义时确定的,而不是在函数调用时确定的。这里用了一个词法作用域的概念,指出JavaScript中的作用域是词法作用域,即在函数定义时,...

    根据一段代码浅谈Javascript闭包

    JavaScript中的闭包是一种重要的语言特性...理解闭包对于编写高效的JavaScript代码至关重要,特别是在处理异步操作、模块化以及数据封装等方面。闭包可以帮助我们创建私有变量,避免全局污染,并实现数据的持久化存储。

    js代码-定时器闭包传参

    在JavaScript编程中,"js代码-定时器闭包传参"这一主题涉及到两个核心概念:定时器(Timer)和闭包(Closure),以及如何通过它们传递参数。在JavaScript中,定时器是通过`setTimeout`或`setInterval`函数实现的,...

Global site tag (gtag.js) - Google Analytics