更改变量名时记录不同的值答案

【问题标题】：log's different values on changing variable name更改变量名时记录不同的值
【发布时间】：2020-07-25 06:14:05
【问题描述】：

HTML

<form>
    <input type="text" id="name" placeholder="name">
    <input type="email" id="email" placeholder="email">
    <input type="submit" id="submit">
</form>

var submit = document.getElementById("submit");
var email = document.getElementById("email");
var name = document.getElementById("name");
console.log(name);
console.log(email);

控制台输出：

[object HTMLInputElement]
<input type="email" id="email" placeholder="email">

但如果我只是将document.getElementById("name") 的变量名从name 更改为x，控制台输出会发生变化

新的 JS

var submit = document.getElementById("submit");
var email = document.getElementById("email");
var x = document.getElementById("name");
console.log(x);
console.log(email);

控制台输出

<input type="text" id="name" placeholder="name">
<input type="email" id="email" placeholder="email">

有人可以解释变量名称name 的原因和问题吗？

【问题讨论】：

检查代码中是否还有其他“x”变量
@Govi-Boy 这就是所有代码

标签： javascript html ecmascript-6

【解决方案1】：

这里发生的情况是，当您声明 name var 时，实际上是在全局范围内重新分配 name var。然后输入元素被转换为字符串。这是因为当您在全局范围内运行此脚本时，您基本上要求更改 window.name。

根据 MDN 文档 here，window.name 将使用 toString 方法将所有值转换为其字符串表示形式。

现在，为了避免这个问题，有几种方法，其中之一是不在全局范围内编写脚本，这就是我的建议。

【讨论】：

【解决方案2】：

使用const 或let 而不是var，它将解决您的问题。

因为var 的范围与window.name 发生了某种冲突。

【讨论】：