原生javascript学习：javascript闭包实例

最新推荐文章于 2024-08-10 16:15:00 发布

weixin_34315485

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量92

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/LiyuhaoDev/blog/62396

版权

2019独角兽企业重金招聘Python工程师标准>>>

之前看zakas的Professional JavaScript，读过闭包的章节，当时觉得理论上是理解了，把书上的案例都实践了一遍。但例子是纯粹控制台调试实现的，印象不深刻，今天练习原生javascript的时候碰上闭包，简单梳理一下。

先看实例的DEMO：

http://cssplusplus.com/demo/js/1_1_DivControl%20.html

实现代码：

<!DOCTYPE html>
<html>
<head>
<style>
#outer {
	width: 500px;
	margin: 0 auto;
	padding: 0px;
	text-align: center;
}
#changBox {
	width: 100px;
	height: 100px;
	background: black;
	margin: 10px auto;
	display: block;
}
</style>
<script>
function changeStyle(elem, attr, value) {
	elem.style[attr] = value;
}
window.onload = function() {
	var Attr = ["width", "height", "background", "display", "display"];
	var Val = ["200px", "200px", "red", "none", "block"];
	var oBtn = document.getElementsByTagName("input");
	var oDiv = document.getElementById("changBox");
		
	for (i = 0; i < oBtn.length; i++) {
		oBtn[i].index = i;
		oBtn[i].onclick = function() {
			(this.index == oBtn.length - 1) && (oDiv.style.cssText = "");
			changeStyle(oDiv, Attr[this.index], Val[this.index]);
		}
	}
};
</script>
</head>
<body>
<div id="outer">
<input type="button" value="变宽">
<input type="button" value="变高">
<input type="button" value="变色">
<input type="button" value="隐藏">
<input type="button" value="重置">
<div id="changBox"></div>
</div>
</body>
</html>

如果我们把33行的：

changeStyle(oDiv, Attr[this.index], Val[this.index]);

改成：

changeStyle(oDiv, Attr[i], Val[i]);

结果如何？

这是修改后的DEMO：

http://cssplusplus.com/demo/js/1_1_DivControlWrong.html

点击上面的button是没有任何反应的。

问题出现在闭包上，问题分析如下：

我给每个button的onclick动作都绑定了一个function
我点击button，就要调用这个function
这个function执行到changeSytle，开始寻找参数
参数中有变量 i， i 是多少？
先从当前的匿名函数的作用域找 i，没有找到
接着到window.onload 绑定的匿名函数去找（注意javascript里面没有块级作用域概念），找到 i
i 是多少？ i = oBtn.length，因为 window.onload 绑定的匿名函数返回后，变量 i 的值是 oBtn.length
这正是onclick绑定的匿名函数的作用域链中保存的 i 引用的值

转载于:https://my.oschina.net/LiyuhaoDev/blog/62396

weixin_34315485

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生javascript学习：javascript闭包实例

2019独角兽企业重金招聘Python工程师标准>>> ...
复制链接

扫一扫