使用var声明name时输出undefined，改用const正常，求原因

这根本不是变量提升的锅，核心问题是**var声明的全局变量会挂载到浏览器的全局对象window上，而window本身自带一个内置的name属性**，你踩了这个内置属性的坑。

具体细节： #

• 当你用var name = form.querySelector('div #name')声明变量时，因为是全局作用域下的var，这个name会直接成为window.name的别名。
• 浏览器规定window.name只能是字符串类型，不管你给它赋什么值，都会被强制转换成字符串。你这里赋值的是DOM元素，转成字符串后就是"[object HTMLInputElement]"，这是个普通字符串，自然没有value属性，所以console.log(name.value)输出undefined。
• 而用const（或let）声明变量时，它们不会挂载到window对象上，这个name是独立的块级作用域变量，指向的就是你获取到的输入框DOM元素，所以能正常读取value属性。

验证方式： #

在var的代码里加一行console.log(typeof name)，你会看到输出是string；换成const后，输出就是object，直接证明了变量类型的差异。

代码对比 #

出问题的代码（var声明）

var form = document.querySelector('form');
var name = form.querySelector('div #name');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  console.log(typeof name); // 输出string
  console.log(name.value); // undefined
})

<form>
  <div>
    <input id="name" />
  </div>
  <div>
    <input type="submit" id="submit" />
  </div>
</form>

正常工作的代码（const声明）

var form = document.querySelector('form');
const name = form.querySelector('div #name');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  console.log(typeof name); // 输出object
  console.log(name.value); // 正常输出输入值
})

内容的提问来源于stack exchange，提问作者Robin