我正在竭尽全力围绕JavaScript闭包。通过返回内部函数，我可以访问其直接父级中定义的任何变量。这对我有什么用？也许我还没有完全明白这一点。我在网上看到的大多数示例都没有提供任何真实的代码，只是模糊的示例。有人可以告诉我现实世界中使用闭包吗？例如，这是吗？var warnUser = function (msg) { var calledCount = 0; return function() { calledCount++; alert(msg + '\nYou have been warned ' + calledCount + ' times.'); };};var warnForTamper = warnUser('You can not tamper with our HTML.');warnForTamper();warnForTamper();
3 回答
宝慕林4294392
TA贡献2021条经验 获得超8个赞
我用闭包来做类似的事情：
a = (function () {
var privatefunction = function () {
alert('hello');
}
return {
publicfunction : function () {
privatefunction();
}
}
})();
如您所见，a现在有了一个对象，其中有一个方法publicfunction（a.publicfunction()）调用privatefunction，该方法仅存在于闭包内部。您不能privatefunction直接致电（即a.privatefunction()），而只能致电publicfunction()。
它是一个最小的示例，但也许您可以看到它的用处？我们使用它来强制执行公共/私有方法。
慕田峪7331174
TA贡献1828条经验 获得超13个赞
假设您要计算用户单击网页上的按钮的次数。
为此，您在onclick按钮事件中触发了一个函数 以更新变量的计数
<button onclick="updateClickCount()">click me</button>
现在可能有很多方法，例如：
1）您可以使用全局变量和函数来增加计数器：
var counter = 0;
function updateClickCount() {
++counter;
// do something with counter
}
但是，陷阱是页面上的任何脚本都可以更改计数器，而无需调用updateClickCount()。
2）现在，您可能正在考虑在函数内部声明变量：
function updateClickCount() {
var counter = 0;
++counter;
// do something with counter
}
但是，嘿！每次updateClickCount()调用函数时，计数器都会再次设置为1。
3）考虑嵌套函数？
嵌套函数可以访问它们“上方”的范围。
在此示例中，内部函数updateClickCount()可以访问父函数中的计数器变量countWrapper()
function countWrapper() {
var counter = 0;
function updateClickCount() {
++counter;
// do something with counter
}
updateClickCount();
return counter;
}
这可能已经解决了这个两难柜台，如果你能达到updateClickCount()从外面功能，你还需要找到一种方法来执行counter = 0一次不是每次。
4）关闭救援！（自调用功能）：
var updateClickCount=(function(){
var counter=0;
return function(){
++counter;
// do something with counter
}
})();
自调用功能仅运行一次。它将设置counter为零（0），并返回函数表达式。
这种方式updateClickCount成为一种功能。“很棒”的部分是它可以访问父作用域中的计数器。
这称为JavaScript闭包。它使函数具有“ 私有 ”变量成为可能。
该counter是由匿名函数的范围内保护，并且只能使用add函数来改变！
关于闭包的更生动的例子：
<script>
var updateClickCount=(function(){
var counter=0;
return function(){
++counter;
document.getElementById("spnCount").innerHTML=counter;
}
})();
</script>
<html>
<button onclick="updateClickCount()">click me</button>
<div> you've clicked
<span id="spnCount"> 0 </span> times!
</div>
</html>
添加回答
举报
0/150
提交
取消