全局作用域变量无法在函数内访问？两段JavaScript代码差异问询

先看你给出的两段代码：

第一段能正常运行的代码：

function run(){ 
  var name = document.getElementById('name'); 
  name.classList.toggle('name'); 
}

第二段无法运行的代码：

var name = document.getElementById('name'); 
function run(){ 
  name.classList.toggle('name'); 
}

这问题的根源其实藏在浏览器的全局作用域特性里，我给你拆解一下：

在浏览器环境中，全局作用域的变量本质上都是window对象的属性。而window.name是浏览器原生就内置的属性，它的作用是设置或获取当前窗口的名称，而且它的类型被强制固定为字符串。

当你在全局作用域执行var name = document.getElementById('name')时，你以为是在给自定义变量赋值，但实际上是在修改window.name。这时候浏览器会自动把你赋值的DOM元素转换成字符串形式（比如变成"[object HTMLInputElement]"），而字符串类型的值根本没有classList这个属性，所以当你在run函数里调用name.classList.toggle时，自然就会报错，导致代码无法运行。

而第一段代码里，var name是定义在run函数的局部作用域里的，这个局部变量会优先于全局的window.name被访问，所以这里的name是正确获取到的DOM元素，调用classList.toggle自然没问题。

解决方法也很简单，只要把全局变量的名字改成其他不冲突的，比如myName，就可以正常运行了：

var myName = document.getElementById('name'); 
function run(){ 
  myName.classList.toggle('name'); 
}

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