直接访问与在开发工具中读取对象时访问 javascript 属性会产生不同的结果

Posted 2023-03-13

【中文标题】直接访问与在开发工具中读取对象时访问 javascript 属性会产生不同的结果

【英文标题】：Accessing javascript property yields different result when being accessed directly than when reading object in dev tools

【发布时间】：2013-06-29 17:18:11

【问题描述】：

我正在尝试在范围模式下调试jQuery滑块流行的“无法调用未定义的方法'addClass'”，并发现一些奇怪的东西。有人说这个错误是由于值是作为字符串而不是整数传递的，但是我的值是经过验证的整数，我没有想法，所以我去尝试调试 jQuery UI，立即遇到了死胡同。

看图：

如您所见，当我在开发工具中展开选项对象时，options.values 是一个包含两个 NaN 的数组。但是，如果我 console.log(options.values) 我得到了真正的数组，它应该是正确的数值。更糟糕的是，例如，当我直接使用 console.log(options.values[0]) 记录它们时，我得到了正确的值。

但是，当滑块请求值时，它总是返回 NaN - 这在计算范围滑块的最接近句柄时很明显 - NaN 有毒，它会毒化整个循环并返回未定义的最接近句柄，从而导致上述“ addClass”错误。

为什么会出现图片中的情况？为什么会发生？显然，两个相同的属性包含不同的值，具体取决于访问它们的方式。

【参考方案1】：

Chrome 控制台有点棘手。您看到的Object 的状态不一定反映它被记录时的状态。它可以是“更新的”视图。

虽然这并不能解决您的主要问题，但很明显，在许多情况下，记录对象并不能帮助您在 Chrome 上进行调试。断点会是更好的选择。

也就是说，在您的代码中某处对象似乎已更改。

【讨论】：

确实，AngularJS 的异步特性，在其范围内执行此滑块计划，以一种奇怪的方式摆弄选项对象。添加一个创建事件处理程序解决了这个问题。