JavaScript 闭包

最新推荐文章于 2025-06-09 09:53:44 发布

evil19790213

最新推荐文章于 2025-06-09 09:53:44 发布

阅读量103

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 类文章标签： JavaScript C C++ C# F# ViewUI

本文链接：https://blog.youkuaiyun.com/evil19790213/article/details/83520079

JS 类专栏收录该内容

6 篇文章

订阅专栏

本文介绍JavaScript中使用闭包实现事件绑定的方法，通过匿名函数确保每次点击按钮时能正确显示对应的字母，避免变量污染并实现作用域隔离。

利用(function(){…})();来隔离作用域或者说闭包嵌套，相当于作了三个匿名函数来做事件的外部函数，简单说(function(){})()
相当于先定义 function xx(){}，后调用 xx();
()是最高优先级的，所以先执行function(){}，
这个定义了一个匿名函数，等于xx=function(){}
接着就是调用xx()了;

给个例子

<html>
<head>
<title>JavaScript 闭包</title>
<script>
function bindEvent(){
var letters = ['A','B','C','D','E','F'];
var elems = document.getElementsByTagName('INPUT');
var i=0;
for(; i<3; i++){
var letter = letters[i];
elems[i].onclick = function(){
alert(letter);
}
}

for(; i<elems.length; i++){
(function(){
var letter = letters[i];

elems[i].onclick = function(){
alert(letter );
}
})();
}
}
</script>
</head>
<body onload="bindEvent()">
下记alert的都是字母C<br>
<input type="button" value="buttonA"/>
<input type="button" value="buttonB"/>
<input type="button" value="buttonC"/>
<br>
下记alert的字母正确<br>
(function(){})();==> var fun = function(){};fun();
<br>
<input type="button" value="buttonD"/>
<input type="button" value="buttonE"/>
<input type="button" value="buttonF"/>
</body>
</html>