开发过程中总是搞不清楚闭包与匿名函数的概念,经常弄混,闭包是指有权访问另一个函数作用域中变量的函数,创建闭包常见的方式就是在一个函数内部创建另一个函数。
代码实例:
<!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>运行截图:
文章来源: 闭包与匿名函数