需要更多关于 w3schools javascript 闭包示例的解释

2023-12-20

我正在尝试了解闭包,并且正在查看 W3Schools javascript 教程。这是他们通过制作计数器给出的一个例子。

<body>

<p>Counting with a local variable.</p>

<button type="button" onclick="myFunction()">Count!</button>

<p id="demo">0</p>

<script>
var add = (function () {
    var counter = 0;
     return function () {return counter += 1;}
})();

function myFunction(){
    document.getElementById("demo").innerHTML = add();
}
</script>

</body>

示例解释变量 add 被赋予 a 的返回值 自调用函数。

自调用函数只运行一次。它将计数器设置为零 (0),并返回一个函数表达式。

这样add就变成了一个函数。 “精彩”之处在于它可以 访问父作用域中的计数器。

这称为 JavaScript 闭包。它使得有可能 函数具有“私有”变量。

计数器受匿名函数范围的保护,并且 只能使用添加功能进行更改。

Note闭包是一个可以访问父作用域的函数,甚至 父函数关闭后。

解释还不错,但有些事情不清楚。为什么自调用函数是最好的选择?为什么嵌套匿名函数不是自调用函数?当计数器已经返回内部时,为什么必须返回整个匿名函数?


闭包的概念可以解释为具有函数及其上下文。上下文在某种程度上是一种附加到函数上的存储,用于解析捕获的变量(因此称为闭包?)。

执行示例代码时:

var add = (function () {
    var counter = 0; // This is promoted to the below's function context
    return function () {return counter += 1;}
})();

您创建一个上下文,其中counter变量被提升到匿名函数上下文,因此您可以从当前范围访问该变量。

这张图或多或少地解释了这一点:

在这种情况下,X 和 Y 由函数上下文捕获,并在该函数的所有执行中进行。

现在,这只是 V8 实现词汇环境 http://es5.github.io/#x10.2.

请参阅 Vyacheslav Egorov 关于使用 V8 实现闭包的精彩解释:Grokking V8 关闭是为了乐趣(和利润?) http://mrale.ph/blog/2012/09/23/grokking-v8-closures-for-fun.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

需要更多关于 w3schools javascript 闭包示例的解释 的相关文章

  • 机器人/蜘蛛可以利用 Cookie 吗?

    我正在尝试检测访客是否是人类 我刚刚有了一个想法 但不确定这是否可行 但是 如果我可以在用户的 浏览器上存储 cookie 并在他们浏览我的网站时检索它 如果我成功检索 cookie 这是否是检测机器人和蜘蛛的好技术 精心设计的机器人或蜘蛛
  • JavaScript 相当于 jQuery 的 keyup() 和 keydown()

    我在 stackoverflow 上看到过这个链接 document ready 相当于没有 jQuery https stackoverflow com questions 799981 document ready equivalent
  • 获取块上的 execFile stdOut

    我正在尝试使用 execFile 并记录提供任务完成百分比的 stdOut 但回调函数 var child require child process child execFile path to the file options func
  • Javascript:for 与 jQuery.each() 带时间延迟

    Figure 1 for var i Things length 1 i gt 0 i setTimeout function do something with Things i 200 i Figure 2 things each fu
  • Alfresco 更新文件 - 错误帖子

    我正在尝试更新 Alfresco 中的文件 我编写了以下代码 var csrf header Alfresco util CSRFPolicy getHeader var csrf token Alfresco util CSRFPolic
  • FullCalendar 重复事件创建重复项

    我正在为我的新网站实现一个日历 我从后端应用程序检索事件并使用 fullcalendar 在模式中显示结果 我还使用 fullcalendar 的重复功能 https fullcalendar io docs recurring event
  • 在 JavaScript 中使用随机数创建长度为 n 的数组

    跟进这个答案 https stackoverflow com a 34693778 1525840为了创建指定长度的数组 我执行了以下命令以获得相应的结果 但填充了随机数 而不是零 var randoms Array 4 fill Math
  • JavaScript 键码 46 是 DEL 功能键还是 (.) 句点符号?

    我使用 jquery 在 JavaScript 中编写一些逻辑 其中我必须根据 REGEX 模式检查输入内容 例如 a zA Z0 9 Alpha numeric and 逻辑差不多完成了 我只是在过滤功能键 DEL 时遇到了一点问题 我的
  • 如何使用 gatsby-image 不裁剪地显示图像?

    实例 图像可能加载缓慢 https suhadolnik photo surge sh portreti https suhadolnik photo surge sh portreti 我正在使用 GatsbyJS 制作一个摄影网站 并使
  • 无法在 routerOnActivate 上获取查询参数

    我在尝试使用新的路线库获取查询参数时遇到问题 VERSION2 0 0 rc 1 Problem routerOnActivate curr RouteSegment prev RouteSegment currTree RouteTree
  • React hooks 需要返回值吗?

    我最近开始在我的 React 应用程序中构建自定义挂钩 并一直在关注 React 网站上的文档 然而 我正在构建的钩子不需要返回值 因为它们在初始化时为 Redux 设置数据 Example custom hook export const
  • 如何在生成的 HTML 页面中隐藏 JavaScript 注释? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 有没有办法隐藏生成的页面源中的 JS
  • (typeof variable === "function") 和 jQuery.isFunction() 有什么区别?

    我一直用 typeof variable function 我偶然发现jQuery isFunction 我想知道 jQuery方法中的typeof方法有什么区别 不仅有什么区别 而且 什么时候适合使用typeof方法 什么时候适合使用jQ
  • 如何将base64字符串转换为文件?

    我使用 jquery 插件来裁剪图像 该插件将裁剪图像并将其作为 Base64 编码字符串提供给我 为了将其上传到 S3 我需要将其转换为文件并将该文件传递到上传函数中 我怎样才能做到这一点 我尝试了很多事情 包括使用解码字符串atob 没
  • BigVideo.js 播放结束时 URL 重定向

    我已经使用基于 Video js 的 BigVideo 在页面上实现了背景视频 单击 div 时 视频会在后台播放 我一生都无法弄清楚如何在视频播放完毕后重定向到另一个 URL 这是我正在使用的代码 视频播放链接 a href vids g
  • Node Js - 识别请求是来自移动设备还是非移动设备

    我对 Node js 还是个新手 是否有任何解决方法或方法如何使用 Node js 识别来自客户端的请求是来自移动设备还是非移动设备 因为我现在正在做的是我想根据设备类型 移动 桌面 限制对某些 API 的访问 我在服务器端使用restif
  • 未捕获的类型错误:lang 不是函数[重复]

    这个问题在这里已经有答案了 在我的 HTML 中我定义了lang函数在script标签并添加 试射 必须调用的按钮lang点击时
  • Web 动画 API - 不同的动画持续时间?

    我正在尝试 Web Animations API 该 API 目前仅适用于 Webkit 浏览器 可以想象 文档有点稀疏 这是我在上面找到的一篇博客文章 http updates html5rocks com 2014 05 Web Ani
  • 如何在 TypeScript 中声明私有抽象方法?

    如何在 TypeScript 中正确定义私有抽象方法 这是一个简单的代码 abstract class Fruit name string constructor name string this name name abstract pr
  • jquery中(“*”)有什么用

    我正在阅读 jQuery 我不知道为什么使用 请解释一下这有帮助 是jquery中的一个选择器 它可以无条件地选择所有内容 包括html head和body 这是一个解释其用法的示例 document ready function butt

随机推荐