闭包与匿名函数

匿名 (未验证) 提交于 2019-12-03 00:22:01

开发过程中总是搞不清楚闭包与匿名函数的概念,经常弄混,闭包是指有权访问另一个函数作用域中变量的函数,创建闭包常见的方式就是在一个函数内部创建另一个函数。

代码实例:

<!DOCTYPE html> <html> 	<head> 		<meta charset="UTF-8"> 		<title>匿名函数与闭包</title> 		<link rel="stylesheet" href="../asset/Bootstrap/css/bootstrap.min.css" /> 		<link rel="stylesheet" href="../asset/bootstrap-swith/css/bootstrap-switch.css" /> 	</head> 	<body> 		<!--         	作者:         	时间:2017-02-25         	描述:闭包测试         -->         <div class="row">         	<div class="col-md-5">         		<div class="panel panel-primary">         			<div class="panel-heading">         				<h4 class="panel-title" id="SaveType">修改菜单信息</h4>         			</div>         			<div class="panel-body">         				<form action="">         					<div class="row">         						<div class="col-md-4" style="text-align: center;">         							<span>菜单名称:</span>         						</div>         						<div class="col-md-8">         							<input class="form-control" style="display: block;" id="MeunName"/>         						</div>         					</div>	         					         					<div class="row">         						<div class="col-md-4" style="text-align: center;">         							<span>菜单URL:</span>         						</div>         						<div class="col-md-8">         							<input class="form-control" style="display: block;" id="MeunUrl"/>         						</div>         					</div>	         					         					<div class="row">         						<div class="col-md-4" style="text-align: center;">         							<span>菜单级别:</span>         						</div>         						<div class="col-md-8">         							<select id="MeunRank">         								<option value="1">0</option>         								<option value="2">1</option>         								<option value="3">2</option>         							</select>         						</div>         					</div>	         					         					<div class="row">         						<div class="col-md-4" style="text-align: center;">         							<span>父级菜单:</span>         						</div>         						<div class="col-md-8">         							<select id="MeunFarter">         								<option value="1">系统管理</option>         								<option value="2">普通业务</option>  							         							</select>         						</div>         					</div>	         					<div class="row">         						<div class="col-md-4" style="text-align: center;">         							<span>图标设置:</span>         						</div>         						<div class="col-md-8">         							<select id="MeunInco">         								<option value="1">glyphicon-save</option>         							</select>         							<span class="glyphicon glyphicon-save"></span>         						</div>         					</div>	         				</form>         			</div>         			<div class="panel-footer">         				<button id="Save" class="form-control">保存</button>         			</div>         		</div>         	</div>         </div> 		<script type="text/javascript" src="../asset/Script/jquery-1.9.1.min.js" ></script> 		<script type="text/javascript" src="../asset/Bootstrap/js/bootstrap.min.js" ></script> 		<script type="text/javascript">		          //闭包实现该功能的测试     function Test(){     	//获取对象     	var Name =document.getElementById("MeunName");     	var Url =document.getElementById("MeunUrl");     	var Rank =document.getElementById("MeunRank");     	var Farter =document.getElementById("MeunFarter");     	var Inco =document.getElementById("MeunInco");     	return function(){     		//获取操作类型     		var title=document.getElementById("SaveType").innerHTML;     		     		var name=Name.value;     		var Murl=Url.value;     		var rank=Rank.options[Rank.selectedIndex].text;     		var farter=Farter.options[Farter.selectedIndex].text;     		var inco=Inco.options[Inco.selectedIndex].text;     		var obj={Name:name,Url:Murl,Rank:rank,Farter:farter,Inco:inco,Title:title};     		return obj;     	};     }          $(function(){     	$("#Save").click(function(){     		var b=Test();     		console.log(b());     		b=null;     	});     	     });      		</script> 	</body> </html> 
运行截图:

文章来源: 闭包与匿名函数
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!