变量 'name' 没有 return 未定义

Question

我正在学习 JavaScript 中的提升。当我尝试这段代码时

console.log('name', name)
console.log('age', age)
console.log('occupation', occupation)

var name = 'tom'
var age = '23'
var occupation = 'builder'

在我 chrome 的开发者工具中，我得到

name tom
age undefined
occupation undefined

为什么 name 不是 undefined 而其他变量是？

编辑：

我的html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src = "index.js"></script>
</body>
</html>

我的 index.js 文件

console.log('name', name)
console.log('age', age)
console.log('occupation', occupation)

var name = 'tom'
var age = '23'
var occupation = 'builder'

我重新启动了计算机，创建了新文件，但没有任何改变。在 Firefox 中我得到

name <empty string> 
age undefined 
occupation undefined

Answer 1

这完全按照预期工作："age" 和 "occupation" 的声明 (but not assigned values) 已被提升，因此您的控制台日志显示它们存在且值为 "undefined"（而不是抛出一个 ReferenceError），但 name 是特殊的：你不是声明它的人，即使你的代码使它看起来 看起来 就像你一样：

真正发生的事情是您编写的代码是有范围的，因此当您说 var name = "tom" 时，您实际编写的是 currentscope.name = "tom"。在任何类型的显式范围（函数、模块等）中，这将按照您预期的方式运行，但在浏览器的 global 范围中（或更准确地说，"in any execution context in which your scope is window" )，这意味着您的代码实际执行为 window.name = "tom"。

这就是问题所在：name already exists as a global property on the window object

当然，这也适用于任何其他值，如果您在全局范围内 var numbats = "cute";，这与 window.numbats = "cute"; 相同，所以如果您不想运行无声命名冲突：不要在全局范围内声明事物。在函数中对此进行测试（其中 var name 将 shadow 全局 name），或者您可以使用现代 JS 并使用 let 而不是大括号块，但当然我们不再使用 var。

有趣的鲜为人知的事实：将全局 name 设置为 "tom"，然后在同一选项卡中浏览网页一个小时，即使一个小时后，仍然会有 window.name成为你的价值，除非其他人改变了它，这几乎不会发生。这是保持多方位跟踪的有趣方式之一。

变量 'name' 没有 return 未定义

Variable 'name' doesn't return undefined

javascript

undefined

hoisting