Javascript 闭包 - 变量范围问题

2024-05-23

我正在阅读 Mozilla 开发者网站上有关闭包的内容,我注意到在他们的常见错误示例中,他们有以下代码:

<p id="help">Helpful notes will appear here</p>  
<p>E-mail: <input type="text" id="email" name="email"></p>  
<p>Name: <input type="text" id="name" name="name"></p>  
<p>Age: <input type="text" id="age" name="age"></p>  

and

function showHelp(help) {
  document.getElementById('help').innerHTML = help;
}

function setupHelp() {
  var helpText = [
      {'id': 'email', 'help': 'Your e-mail address'},
      {'id': 'name', 'help': 'Your full name'},
      {'id': 'age', 'help': 'Your age (you must be over 16)'}
    ];

  for (var i = 0; i < helpText.length; i++) {
    var item = helpText[i];
    document.getElementById(item.id).onfocus = function() {
      showHelp(item.help);
    }
  }
}

他们说,对于 onFocus 事件,代码只会显示最后一项的帮助,因为分配给 onFocus 事件的所有匿名函数都有一个围绕“item”变量的闭包,这是有道理的,因为在 JavaScript 中变量没有块范围。解决方案是使用“let item = ...”来代替,因为这样它就有了块作用域。

但是,我想知道为什么你不能在 for 循环上方声明“var item”?然后它具有 setupHelp() 的范围,并且每次迭代都为它分配一个不同的值,然后该值将被捕获为闭包中的当前值......对吗?


其原因在于当时item.help被评估后,循环将完全完成。相反,您可以通过闭包来做到这一点:

for (var i = 0; i < helpText.length; i++) {
   document.getElementById(helpText[i].id).onfocus = function(item) {
           return function() {showHelp(item.help);};
         }(helpText[i]);
}

JavaScript 没有块作用域,但有函数作用域。通过创建一个闭包,我们捕获了对helpText[i]永久。

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

Javascript 闭包 - 变量范围问题 的相关文章

  • Firebase Function 从其他文件导入函数 - javascript

    我正在使用 javascript 构建 firebase 函数 现在我有很多内部调用函数 我计划将这些函数移动到不同的文件中 以避免 index js 变得非常混乱 下面是当前的文件结构 functions index js interna
  • 如何在 Highcharts / Highstock 上显示 x 轴上的十字线选定值和 y 轴上选定的日期?

    我正在研究这个项目 其中包括在交互式图表上显示历史数据 我得出的结论是 Highcharts Highstock 是最好的选择 因为它提供了最多的定制选项 我想要实现的目标是 当我将鼠标悬停在一个点上时 分别在 x 轴和 y 轴上显示所选值
  • 如何在phonegap应用程序中使用存储在localStorage中的json feed?

    这就是我正在做的 向我的网络服务器发出请求 响应采用 json 格式 使用 jquery 模板在我的应用程序中呈现回调数据 非常简单 就像魅力一样 问题是 我想在本地存储一些数据 这样我的应用程序就不必每次都从服务器获取它 3g 很慢 每笔
  • javascript中怪异模式的元素宽度?

    我一直在浏览所有流行的 js 库 但我找不到一个具有 DOM 元素宽度函数的库 该函数实际上可以解释 Internet Explorer 中的怪异模式 问题是 当启用怪异模式时 填充和边框不会计入宽度 据我所知 当省略 doctype 或将
  • 如果替换路径中的最后一个元素,React Router v6 useNavigate() 不会导航

    我有一个具有以下功能的反应组件 const handleNavigate clientId gt console log clientId navigate dashboard clients clientId console log 显示
  • 将随机字符串转换为十六进制颜色

    我的应用程序中有一个操作日志表 我想根据该条目的 sessionID 为行分配随机颜色 以帮助查看模式 分组操作 到目前为止我有这个 console log stringToColorCode mj3bPTCbIAVoNr93me1I fu
  • 用不同的颜色为 Google 热图着色

    我试图开发一个遵循 Google Map API 的热度 https developers google com maps documentation javascript examples layer heatmap https deve
  • 具有两组子组件的 React 组件

    我正在创建一个组件 需要接收两组子组件并放置在组件的两个不同部分中 let CreditCardForm icons fields gt div div div div icons div div div fields div let Cr
  • less.js - 在解析器回调中获取变量值

    我正在使用 less js 1 3 0 在客户端将 less 解析为 css 在解析器的回调中 我想获取每个变量的值 我尝试了以下方法但没有成功 var data colour red example background color co
  • 通过 Javascript 将图像切割成碎片

    我正在创建一个简单的拼图游戏 为了做到这一点 我需要将我正在使用的图片切成 20 块 Javascript 有没有办法将一张图片切成 20 个相等的部分 并将它们保存为网页中的 20 个不同的对象 或者我只需要进入 Photoshop 自己
  • Javascript 正则表达式来匹配正则表达式

    我正在研究一个特殊的正则表达式来匹配 javascript 正则表达式 现在我有这个正则表达式工作 i g m 例如 foo match i g m gt foo foo undefined foo i match i g m gt foo
  • 监听浏览器宽度以进行响应式网页设计?

    我正在努力使我的网站适合移动设备 我想知道浏览器窗口的大小 以便当它比 728px 窄时我可以执行某些操作 而当它大于 728px 时我可以执行其他操作 这必须考虑到调整 PC 上的窗口大小以及在手机中从纵向模式更改为横向模式 如何才能做到
  • 如何检查 Map 或 Set 是否为空?

    对于 JavaScript 中的传统对象 使用以下命令很容易检查它是否为空 Object keys method const emptyObj console log Object keys emptyObj length 0 true i
  • 限制 jQuery id 字符串吗?

    简而言之 我的问题是字符串在 jQuery 中作为可搜索 id 或可搜索内容有什么限制 更新 我得到了 ID 部分 但不是为什么我什至无法使用该字符串搜索 html 内容 对于任何愿意告诉我一个正则表达式来将模式从 MM dd yy HH
  • D3v6 嵌套图 - 嵌套 join()?

    我想可视化每个节点的 孩子 洞察力 我猜 D3v6 join 函数可以嵌套 不幸的是我找不到任何例子 下面的代码片段包含一个具有 3 个节点和子节点作为属性的outerGraph 到目前为止 这些孩子还没有被使用 相反 innerGraph
  • ExpressJS - DELETE 请求后 res.redirect

    我一直在寻找如何执行此操作 我正在尝试在发出删除请求后重定向 这是我正在使用的代码没有重定向 exports remove function req res var postId req params id Post remove id p
  • 一个接一个地淡入div

    大家好 我很擅长 HTML 和 CSS 但才刚刚开始接触 jQuery 的皮毛 我希望让 3 个 div 在页面加载时逐渐淡入 到目前为止我有这个 我听说使用 css 将显示设置为 none 对于任何使用非 JavaScript 浏览器的人
  • 允许使用 grunt browserify 进行全局转换

    我已将 jQuery 添加为 html 文件中的脚本标记 并将其添加到package json与一起工作browserify shim如下 browserify transform browserify shim browserify sh
  • Jquery 两个字段的时间差(以小时为单位)

    我的表单中有两个字段 用户可以在其中选择输入时间 start time end time 我想在更改这些字段时重新计算另一个字段的值 我想做的是获取两次之间的小时数 例如 如果我的开始时间为 5 30 结束时间为 7 50 我想将结果 2
  • 更改javascript nodejs中所有页面的href url

    我已经实现了具有多种语言下拉菜单的引导导航栏 当我选择语言时 它将翻译页面 如何更改其他页面的 url 和按钮文本 当我选择french 将所有网址更改为 fr about and fr contact 如何使用 JavaScript 进行

随机推荐

  • 如何在asp.net背后的代码中获取css样式

    我需要从 asp net c 中的代码后面获取 css 样式 在网上没有找到解决方案 是否可以直接从 styles css 文件获取它 还是需要解决方法 我在我的网络应用程序中使用主题 但我还需要进行一些服务器处理 并且我需要 ccs 文件
  • Xcode 11 - 在 Catalyst Swift 中禁用调整大小模式

    We are 将我们基于 Swift 的 iOS 应用程序转换为 Mac兼容使用Catalyst在 Xcode 11 中 当用户使用时 我们在 UI 中面临一个问题resize应用程序窗口 那么我们可以禁用调整大小模式并为应用程序窗口提供修
  • 如何将Vue包装的对象转换为普通对象

    我需要将对象类型的数据变量分配给普通变量 const myVue new Vue el myVue data vars show Form methods assign vars const new vars this vars html
  • 查找相邻成员

    我必须找出列表中的两个成员是否相邻 限制是使用append 3谓词 到目前为止 我已经完成了下面的操作 如果它是真的 它就有效 否则我得不到答案 就像它永远运行一样 adjacent X Y L append L1 X Y T1 appen
  • 在cmake中,什么是“项目”?

    这个问题是关于project命令 推而广之 是什么concept of a project意思是cmake中的 我真的不明白什么是project是 以及它与target 我想我确实理解 我看了一下cmake 文档project http w
  • 在powershell中,如何获得用于调用函数的确切原始命令?

    有什么东西在 MyInvocation是这样的吗 或者有什么办法可以提取出来 我想要函数调用中用于参数的原始文本 使用时有一些注意事项 myinvocation line or myinvocation position 如果您将命令的调用
  • 嵌套列表、jquery 和 stopPropagation

    我遇到了嵌套菜单未按照我预期的方式运行的问题 我已经在 StackOverflow 上查看了一堆有关 stopPropagation 的内容 但它似乎不起作用 不幸的是 该网站是基于 WordPress 的 因此我无法直接控制网站上菜单生成
  • 如何创建我自己的系统命名空间和对象?

    这里据说http msdn microsoft com en us library fa13yay7 28v VS 90 29 aspx http msdn microsoft com en us library fa13yay7 28v
  • 关闭操作时 WeakAction 中的错误

    在我参与的一个项目中 大量使用了WeakAction 该类允许保留对操作实例的引用 而不会导致其目标不被垃圾收集 它的工作方式很简单 它对构造函数执行一个操作 并保留对操作目标和方法的弱引用 但丢弃对操作本身的引用 当执行操作时 它会检查目
  • 在 Android 上使用 AT 命令与调制解调器对话

    我试图与三星 Galaxy s2 plus 和华为 p1 xl u9200 调制解调器发送 AT 命令 但无法得到任何结果 我使用 adb shell 发送命令并使用 logcat 查看日志 在三星 当我执行 cat 时 proc tty
  • 如何使用Spring WebClient进行同步调用?

    Spring Framework in 休息模板 https docs spring io spring framework docs current javadoc api org springframework web client R
  • 如何在 TypeScript 中导入 JavaScript 模块

    我有一些 JavaScript 代码正在尝试转换为 Typescript 据推测 TypeScript 是 JavaScript 的超集 但以下内容有编译器错误 假设我没有将 ko 库导入到 typescript 中 我将如何转换以下代码
  • 基于 2 个输入的伪随机数生成器 [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我需要根据 2 个输入值 X 和 Y 生成一个伪随机数 给定相同的 X 和 Y 值 我需要得到相同的结果 结果应介于 0 和 1 之间 含
  • use 语句顺序会影响 PHP 中的功能吗?

    我使用 PHP 的命名空间已经有一段时间了 我认为它对我的编程来说是一个很好的补充 今天早上我想知道一些关于use陈述 我想知道顺序是否use影响我的 PHP 代码的功能 根据 PHP net 使用别名引用外部完全限定名称或导入的能力是命名
  • 如何在MaterialApp主题中设置fontSize的MediaQuery textScaleFactor

    我想在 MaterialApp 主题内设置 MediaQuery 以便在用户更改设置时 FontSize 尊重用户设置 我尝试创建最终的curlScale MediaQuery of context textScaleFactor 并相应地
  • 使用 JDBC 获取 Oracle 11g 的最后插入 ID

    我是使用 Oracle 的新手 所以我将放弃之前已经回答过的内容这个问题 https stackoverflow com questions 3131064 get id of last inserted record in oracle
  • NTFS 连接与符号链接(对于目录)[关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 从高层次的角度来看 意味着只关心结果和接口 而不是实现 指向目录的 NTFS 重解析点和指向目录的符号链接之间的行为 如果有的话 有什么区别 同一目录
  • Python - 测试抽象基类

    我正在寻找测试抽象基类中定义的方法的方法 最佳实践 我能直接想到的一件事是对基类的所有具体子类执行测试 但有时这似乎有些过分 考虑这个例子 import abc class Abstract object metaclass abc ABC
  • Visual Studio 2010 的“线程”窗口中的 和 [Thread Destroyed] 详细信息

    我一直在尝试调试与一个应用程序的线程相关的一些问题 当我附加到应用程序时 我看到一个像这样的窗口 这个名为 Thread Destroyed 的线程是什么 应用程序代码肯定不会写这个名称 这意味着线程的调用堆栈不可用 采集引擎 线程在应用程
  • Javascript 闭包 - 变量范围问题

    我正在阅读 Mozilla 开发者网站上有关闭包的内容 我注意到在他们的常见错误示例中 他们有以下代码 p Helpful notes will appear here p p E mail p