Javascript 对象属性值因显示方式而异

Question

我对 JavaScript 比较陌生，我可以通过一些帮助来理解这里发生了什么。对于那些知道的人来说，这可能是一个简单的问题。根据请求输出的方式，我会为对象的属性获取不同的值。

（此处提供的背景信息可能比需要的更多，但为了完整性而包含在内。）

我正在尝试使用 three.js ColladaLoader.js 将 Collada dae (XML) 文件读入 Firefox，以显示基于分析数据着色的几何图形。平台是windows 7。

ColladaLoader.js 包含一个“输入”类型的对象，我有一个名为“tinput”的“输入”对象的实例。

为了尝试了解导入分析数据的最佳方式（请参阅：https://collada.org/mediawiki/index.php/Extension），我将以下行放在 ColladaLoader.js 的 Polygons.prototype.parse 函数中。

console.log('>tinput:', tinput, ' >tinput.source:', tinput.source, ' >tinput["source"]:', tinput["source"]);

在这一行中，我请求 Firefox 控制台显示“tinput”对象，然后使用两种不同的方法显示该对象的“source”属性。这导致：

">tinput:" Object { semantic: "VERTEX", offset: 0, source: "XX", set: -1 } " >tinput.source:" "VV" " >tinput["source"]:" "VV"

请注意，当我打印整个对象和直接打印“源”属性时，“源”属性的值是不同的。

在 dae 文件中找到的“source”的正确值是“VV”：（注意：ColladaLoader.js 去掉了井号）。 XML 标记为：

<input source="#VV" semantic="VERTEX" offset="0"/>

注意：文件中还有另一个 dae XML 条目，如下所示：

<input source="#XX" semantic="POSITION"/>

但这不是被解析的行，虽然看起来 JavaScript 正在从这里提取“XX”。

我想看看对象中是否还有其他东西以这种方式起作用，所以我写道：

for( iii in tinput ) {
    console.log(' iii = ', iii, '    tinput[iii] = ', tinput[iii]);
}   

导致：

" iii = " "semantic" "    tinput[iii] = " "VERTEX" ColladaLoader.js:3210
" iii = " "offset" "    tinput[iii] = " 0 ColladaLoader.js:3210
" iii = " "source" "    tinput[iii] = " "VV" ColladaLoader.js:3210
" iii = " "set" "    tinput[iii] = " -1 ColladaLoader.js:3210
" iii = " "parse" "    tinput[iii] = " function () ColladaLoader.js:3210

这表明只有“源”属性会根据其显示方式产生不同的值。

我也试过了：

console.log('>tinput.valueOf():', tinput.valueOf());

产生了：

">tinput.valueOf():" Object { semantic: "VERTEX", offset: 0, source: "XX", set: -1 }

和：

console.log(' >tinput.source.valueOf():', tinput.source.valueOf(), '>tinput["source"].valueOf():', tinput["source"].valueOf());

产生了：

" >tinput.source.valueOf():" "VV" " >tinput["source"].valueOf():" "VV"

仍然显示相同的差异。

我也试过了：

console.log('tinput = ', JSON.stringify(tinput, null, 2) );

导致：

"tinput = " "{
  "semantic": "VERTEX",
  "offset": 0,
  "source": "VV",
  "set": -1
}" 

这表示“source”（“VV”）的正确值。

dae XML 文件的这一部分在下面给出了问题，其中长数据字段被截断：

<source id="XX">
  <float_array count="16554" id="verts-points-array">26.47993 0.1520446 11.91956 26.42765 0.1342111 11.91947 (...) </float_array>
  <technique_common>
    <accessor count="5518" source="#verts-points-array" stride="3">
      <param type="float" name="X"/>
      <param type="float" name="Y"/>
      <param type="float" name="Z"/>
    </accessor>
  </technique_common>
</source>
<source id="analysis_data_source" name="per_vertex_results_data">
  <float_array count="16554" id="analysis-data-array">26.47993 0.1520446 11.91956 26.42765 0.1342111 11.91947 (...) </float_array>
  <technique_common>
    <accessor count="5518" source="#analysis-data-array" stride="3">
      <param type="float" name="P" semantic="PRESSURE" />
      <param type="float" name="T" semantic="TEMPERATURE"/>
      <param type="float" name="VM" semantic="VON_MISES_STRESS"/>
    </accessor>
  </technique_common>
</source>
<vertices id="VV">
  <input source="#XX" semantic="POSITION"/>
  <input source="#analysis_data_source" semantic="RESULTS"/>
</vertices>
<triangles count="2758" material="materialref">
  <input source="#VV" semantic="VERTEX" offset="0"/>
  <p>150 141 163 151 150 164 152 151 165 153 152 (...) </p>
</triangles>

当差异出现时被解析的行是“三角形”标签中的“输入”标签。 （XML 文件验证良好。）

谁能帮我理解这里发生了什么？为什么我会根据访问“源”参数的方式获得不同的值？ （它可能与所有 Collada/XML 的东西无关，但我认为我应该包含它以防万一。）

谢谢。

编辑：

我重新阅读了这篇文章，我觉得我把它弄复杂了：

简短版：

鉴于：

console.log('tinput =', tinput);
console.log('tinput.source =', tinput.source);

产量：

"tinput =" Object { semantic: "VERTEX", offset: 0, source: "XX", set: -1 }
"tinput.source =" "VV"

为什么“源”属性值不一样？

很抱歉在长篇文章上浪费了您的时间。

Answer 1

好吧，我的无知又暴露了。看起来问题源于我不了解 console.log 的工作原理。当您尝试使用它来显示对象的属性值时，console.log 似乎有一些愚蠢的行为。 console.log 不会显示执行 console.log 行时存在的对象属性的值。尽管输出中的位置将与 console.log 调用的位置一致，但报告的值将是脚本执行结束时对象中存在的值。这里有更完整的描述：console.log object at current state

谢谢。