Javascript第六章闭包closure规则第三课

痛定思痛。 2022-02-19 01:25 206阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<script type="text/javascript">
    		//在一个函数内部又定义一个函数
    		/*function f1(){ var n=99; function f2(){//只是定义函数，必须调用才会执行 console.log(n); //在内部函数f2中可以访问到函数f1中的局部变量n } //f2(); return f2; //返回函数f2 } var fn=f1(); fn();*/
    
    
    		function doAdd(){ 
    			for(var i=1;i<=5;i++){ 
    				//方式一：会产生闭包问题
    				/*var btn=document.createElement("input"); btn.type="button"; btn.value="按钮"+i; btn.function(){ console.log("点击了按钮"+i); }; $("mydiv").appendChild(btn);*/
    
    				//方式二：不在函数内部定义函数
    				//$("mydiv").appendChild(createButton(i));
    
    				//方式三：为元素附加属性
    				var btn=document.createElement("input");
    				btn.type="button";
    				btn.value="按钮"+i;
    				btn.num=i; //存储数据
    				btn.onclick=function(){ 
    					console.log("点击了按钮"+this.num);
    				};
    				$("mydiv").appendChild(btn);
    			}
    		}
    
    		function createButton(num){ 
    			var btn=document.createElement("input");
    			btn.type="button";
    			btn.value="按钮"+num;
    			btn.onclick=function(){ 
    				console.log("点击了按钮"+num);
    			};
    			return btn;
    		}
    
    		function $(id){ 
    			return document.getElementById(id);
    		}
    
    	</script>
    </head>
    <body>
    	<input type="button" value="向div中添加多个按钮" onclick="doAdd()" >
    
    	<div id="mydiv"></div>
    </body>
    </html>

![在这里插入图片描述][20190415124403118.png]

难点：通过为元素自创一个属性，达到存储数据的目的

![在这里插入图片描述][2019041512452353.png]

可以随便定义属性，不影响输出结果

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70]: /images/20220219/e528c4c27e2c458d81e337a2d358221b.png
[20190415124403118.png]: /images/20220219/d60fc3317992484eb550a67967f5f070.png
[2019041512452353.png]: /images/20220219/2f6e3c93cda34534ae458acd2e3a6fa6.png