JavaScript 中闭包的实际用途是什么？

发布于 2024-08-30 18:03:12 字数 659 浏览 3 评论 0原文

我正在尝试尽最大努力来理解 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();

原文

I'm trying my hardest to wrap my head around JavaScript closures.

I get that by returning an inner function, it will have access to any variable defined in its immediate parent.

Where would this be useful to me? Perhaps I haven't quite got my head around it yet. Most of the examples I have seen online don't provide any real world code, just vague examples.

Can someone show me a real world use of a closure?

Is this one, for example?

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();

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

垂暮老矣 2024-09-06 18:03:12

假设您想要计算用户单击网页上的按钮的次数。

为此，您在按钮的 onclick 事件上触发函数来更新变量的计数

<button onclick="updateClickCount()">click me</button>

现在可能有很多方法，例如：

您可以使用 < strong>全局变量，以及增加计数器的函数：
```
 var 计数器 = 0;

 函数 updateClickCount() {
     ++计数器；
     // 用计数器做一些事情
 }
```
但是，陷阱是页面上的任何脚本都可以更改计数器，而无需调用updateClickCount()。

现在，您可能正在考虑在函数内声明变量：
```
 函数 updateClickCount() {
     变量计数器 = 0；
     ++计数器；
     // 用计数器做一些事情
 }
```
但是，嘿！每次调用 updateClickCount() 函数时，计数器都会再次设置为 1。

考虑嵌套函数吗？
嵌套函数可以访问它们“上方”的作用域。
在此示例中，内部函数 updateClickCount() 可以访问父函数 countWrapper() 中的计数器变量：
```
 函数 countWrapper() {
     变量计数器 = 0；
     函数 updateClickCount() {
         ++计数器；
         // 用计数器做一些事情
     }
     updateClickCount();
     退货柜台；
 }
```
如果您可以从外部访问 updateClickCount() 函数，并且还需要找到一种方法来执行 counter = 0，那么这可以解决计数器困境只一次而不是每次。

关闭救援！（自调用函数）：
```
 var updateClickCount = (function(){
     变量计数器 = 0；

     返回函数(){
         ++计数器；
         // 用计数器做一些事情
     }
 })();
```
自调用函数仅运行一次。它将计数器设置为零 (0)，并返回一个函数表达式。
这样 updateClickCount 就成为一个函数。 “美妙”的部分是它可以访问父作用域中的计数器。
这称为JavaScript 闭包。它使得函数可以拥有“私有”变量。
计数器受匿名函数范围的保护，并且只能使用updateClickCount()函数进行更改！

关于闭包的更生动的例子

<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>

参考：JavaScript 闭包

Suppose, you want to count the number of times user clicked a button on a webpage.

For this, you are triggering a function on onclick event of button to update the count of the variable

<button onclick="updateClickCount()">click me</button>

Now there could be many approaches like:

You could use a global variable, and a function to increase the counter:
```
 var counter = 0;

 function updateClickCount() {
     ++counter;
     // Do something with counter
 }
```
But, the pitfall is that any script on the page can change the counter, without calling updateClickCount().

Now, you might be thinking of declaring the variable inside the function:
```
 function updateClickCount() {
     var counter = 0;
     ++counter;
     // Do something with counter
 }
```
But, hey! Every time updateClickCount() function is called, the counter is set to 1 again.

Thinking about nested functions?
Nested functions have access to the scope "above" them.
In this example, the inner function updateClickCount() has access to the counter variable in the parent function countWrapper():
```
 function countWrapper() {
     var counter = 0;
     function updateClickCount() {
         ++counter;
         // Do something with counter
     }
     updateClickCount();
     return counter;
 }
```
This could have solved the counter dilemma, if you could reach the updateClickCount() function from the outside and you also need to find a way to execute counter = 0 only once not everytime.

Closure to the rescue! (self-invoking function):
```
 var updateClickCount = (function(){
     var counter = 0;

     return function(){
         ++counter;
         // Do something with counter
     }
 })();
```
The self-invoking function only runs once. It sets the counter to zero (0), and returns a function expression.
This way updateClickCount becomes a function. The "wonderful" part is that it can access the counter in the parent scope.
This is called a JavaScript closure. It makes it possible for a function to have "private" variables.
The counter is protected by the scope of the anonymous function, and can only be changed using the updateClickCount() function!

A more lively example on closures

<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>

JavaScript 中闭包的实际用途是什么？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（24）

现在可能有很多方法，例如：

关于闭包的更生动的例子

Now there could be many approaches like:

A more lively example on closures

限制

去

Throttling

Debouncing

解释 JavaScript 中闭包的实际用途

Explaining the practical use for a closure in JavaScript

关于作者

相关话题

热门标签

推荐作者

qq_FjTq5B

18273202778

WordPress小学生

〃温暖了心ぐ

迷乱花海

niuniu

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。