浏览器控制台的特殊执行方式，暂存变量的作用域 和 同步/异步行为解释

问题描述：

第1种情况：console分两次执行

//第一次执行
const accessToken = localStorage.getItem("user");

//再执行
console.log(accessToken); 
//输出
//显示undefined。

第2种情况：console同时执行两行

const accessToken = localStorage.getItem("user");
console.log(accessToken);就会返回正确的值

你的问题的本质是 浏览器控制台的特殊执行方式，涉及 暂存变量的作用域 和 同步/异步行为，我们来详细拆解一下发生了什么。

---

🔍 为什么分两次执行会得到 undefined？

在 Chrome/Firefox 等浏览器的控制台，当你 单独执行 const accessToken = localStorage.getItem("user"); 时，变量 accessToken 不会被存储在全局作用域 window 里，而是仅限于当前的代码块。

所以，当你 第二次执行 console.log(accessToken); 时，浏览器找不到这个变量，因为它已经 在上一条指令执行完后被销毁 了！

---

🚨 关键点

1. 控制台的 const 变量不会保留在后续的命令中

   • 当你在控制台输入 const accessToken = localStorage.getItem("user"); 并回车，这个变量只在当前的执行上下文里有效。
   • 但执行完之后，这个变量不会被存入全局作用域，相当于它立刻消失了。
   • 所以你第二次输入 console.log(accessToken);，控制台找不到 accessToken，返回 undefined 或报错。

2. 如果 const 变量不存入全局作用域，后续代码无法访问

   • const 变量定义后不会变成 window 对象的属性。
   • 你可以测试：

     const testVar = "hello";
     console.log(window.testVar); // 结果是 undefined
     

   • 因为 testVar 只是当前执行块的变量，不会被 window 记录。

3. 如果你一次性执行两行代码，变量还在作用域内

   const accessToken = localStorage.getItem("user");
   console.log(accessToken);
   

   • 由于 accessToken 仍然在同一个执行上下文中，console.log(accessToken); 可以成功读取它的值。

---

🔎 如何验证这个现象？

可以试试 var 关键字：

var accessToken = localStorage.getItem("user");
console.log(accessToken);

• 由于 var 声明的变量会自动挂载到 window，你可以分步执行：

  var accessToken = localStorage.getItem("user"); // 执行
  console.log(accessToken); // 再次执行
  

• var 变量可以存活在全局作用域，所以它不会丢失。
• 但 const 和 let 变量是块级作用域，执行完一条语句后不会保存到全局环境。

---

✅ 解决方案

方案 1：使用 var（不推荐，除非你确实需要全局变量）

var accessToken = localStorage.getItem("user");

然后你就可以单独执行：

console.log(accessToken);

这时 accessToken 不会丢失。

---

方案 2：使用 window 变量

window.accessToken = localStorage.getItem("user");

然后你可以单独执行：

console.log(window.accessToken);

这样，accessToken 明确存入 window，不会因为作用域问题丢失。

---

方案 3：每次都直接获取最新值

console.log(localStorage.getItem("user"));

这样可以保证获取 localStorage 里的最新值，不会因为变量缓存问题导致数据过时。

---

📌 总结

现象	原因	解决方案
const accessToken = localStorage.getItem("user"); 然后 console.log(accessToken); 报错或 undefined	const 变量 仅在当前执行块有效，不会存入全局作用域	1. 直接 console.log(localStorage.getItem("user")); 2. 用 var 或 window.accessToken
const accessToken = localStorage.getItem("user"); console.log(accessToken);（同一执行块）返回正确值	变量仍在当前作用域内，未被销毁	推荐这种方式
var accessToken = localStorage.getItem("user"); 之后执行 console.log(accessToken); 可以获取值	var 变量存入 window，可以跨多个控制台指令访问	可以使用 var，但不推荐（可能污染全局变量）

---

💡 最佳实践

如果你只想获取 localStorage 值：

console.log(localStorage.getItem("user"));

如果你想确保变量能在后续命令中使用：

window.accessToken = localStorage.getItem("user");
console.log(window.accessToken);

这样就不会遇到 undefined 的问题了！😃