JavaScript闭包的实际用途是什么？
我正在竭尽全力围绕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();
狐的传说浏览 555回答 3
3回答
-
宝慕林4294392
我用闭包来做类似的事情：a = (function () { var privatefunction = function () { alert('hello'); } return { publicfunction : function () { privatefunction(); } }})();如您所见，a现在有了一个对象，其中有一个方法publicfunction（a.publicfunction()）调用privatefunction，该方法仅存在于闭包内部。您不能privatefunction直接致电（即a.privatefunction()），而只能致电publicfunction()。它是一个最小的示例，但也许您可以看到它的用处？我们使用它来强制执行公共/私有方法。 -
慕田峪7331174
假设您要计算用户单击网页上的按钮的次数。为此，您在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>
随时随地看视频慕课网APP
相关分类
JavaScript