闭包与匿名函数

最新推荐文章于 2021-04-03 10:22:41 发布
最新推荐文章于 2021-04-03 10:22:41 发布
阅读量363 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/string_user_get_set/article/details/79055151
版权

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

代码实例：

<!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>
运行截图：

string_user_get_set
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
匿名函数与闭包
weixin_33728708的博客
07-13 72
2019独角兽企业重金招聘Python工程师标准>>> ...
匿名函数、闭包
luckypian
07-12 496
一.匿名函数 1.定义 没有名字的函数。 function(num1,num2){ return num1 + num2 } 2.IIFE 定义：自调用函数，生出来就被调用。 var a = (function(num1,num2){ return num1 + num2})(1,5) console.log(a) 二.闭包 1.定义 官方定义：闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数)，因而这些变量也是该表达式的
js 匿名函数和闭包函数
zhy421202048的博客
11-04 555
例子： function checkClosure(){ for（var i=0;i setTimeout(function(){ alert(i); },2000); } }  checkClosure(); 仔细想一想这个函数的执行结果是什么输出0,1,2？ 其实只是2,2,2而已，这是因为for循环很快，当两秒后i的值已经是2了，那如何输出0,1,2那? 那我们用到了匿
js 闭包和匿名函数
xiaofengxiaoling的专栏
11-21 2404
前面学了这么多知识，今天就来看看匿名函数和闭包吧！ 想要学习闭包先来看看什么是匿名函数吧！ （一）匿名函数 匿名函数就是没有名字的函数。他有两种声明方式： 1.典型的函数声明： function functionName(arg0,arg1,arg2){ //函数体 } 2.函数表达式: var functionName
浅析PHP中的闭包和匿名函数
10-18
在PHP编程语言中，闭包和匿名函数是两个密切相关但略有区别的概念，但在实际使用中，它们常常被当作同一回事。PHP中的闭包是一种特殊类型的函数，它能够捕获和存储外部作用域中的变量，即使这些变量在闭包被定义后...
PHP中的闭包（匿名函数）浅析
10-24
主要介绍了PHP中的闭包（匿名函数）浅析,本文给出了一个使用实例和执行效率测试,需要的朋友可以参考下
详谈JavaScript 匿名函数及闭包
10-25
在示例一中，`checkClosure`函数内的匿名函数对`str`变量形成了闭包，使得`str`在`checkClosure`执行完毕后仍然存活，直到匿名函数执行完成。 闭包在优化代码和管理作用域方面有重要作用。例如，示例二展示了如何...
详解JavaScript匿名函数和闭包
10-15
主要介绍了JavaScript匿名函数和闭包的相关资料，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
js匿名函数和闭包
sw249009188的专栏
08-28 92
[code="java"]//普通函数 function box() { return 'Lee'; } alert(box()); //匿名函数 function () { //单独的匿名函数，是无法运行的 return 'Lee'; //就算能运行，也无法调用，因为没有名称 } //把匿名函数赋值给变量 var box = function () { ...
匿名函数和闭包
m0_49049914的博客
04-03 145
匿名函数的定义格式如下： func(参数)(返回值){ 函数体 } 匿名函数因为没有函数名，所以没办法像普通函数那样调用，所以匿名函数需要保存到某个变量或者作为立即执行函数: func main() { // 将匿名函数保存到变量 add := func(x, y int) { fmt.Println(x + y) } add(10, 20) // 通过变量调用匿名函数 //自执行函数：匿名函数定义完加()直接执行 func(x, y int) { fmt.Println(x + y) }(10, 20)
浅谈匿名函数和闭包
weixin_33862188的博客
03-16 260
前言 相信很多前端小伙伴在工作和学习中，都会或多或少的接触和了解到匿名函数和闭包。也去网上搜索了不少的资料，查到资料和解释都各有说辞，甚至有些解释本身就是不正确的，这更加让人头疼。今天就来聊一聊匿名函数和闭包，浅谈一下他们之间的关系（实际上他们之间并没有什么直接关系！important）。 什么是匿名函数 与匿名函数相对应的是具名函数，具名函数非常简单：function myFn(){}，这就是个...
匿名函数（闭包函数）
Austin_奥斯丁
03-02 267
在PHP中匿名函数（Anonymous functions），也叫闭包函数（ closures ），允许临时创建一个没有指定名称的函数。经常用作回调函数（callback）的参数。 当然，也有其他应用的情况。 注：php闭包是PHP5.3版本之后才有的 什么是闭包？闭包是可以包含自由（未绑定到特定对象）变量的代码块；这些变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义...
JavaScript中的匿名函数与闭包深度解析
"本文主要介绍了JavaScript中的匿名函数和闭包，这两种特性对于JavaScript编程具有重要意义。匿名函数，或称拉姆达函数，是无名称的函数表达式，它可以作为参数传递，或者在不需直接引用时使用。在JavaScript中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值