在 javascript 中，可通过声明全局变量实现跨函数访问数据，但需注意作用域、变量提升及现代开发中的替代方案（如模块化、闭包或状态管理）。
在 javascript 中，可通过声明全局变量实现跨函数访问数据，但需注意作用域、变量提升及现代开发中的替代方案（如模块化、闭包或状态管理）。
在 JavaScript 中，变量的作用域决定了它能在哪些地方被访问。你遇到的错误——username is not defined——根本原因在于：使用 let username 在 getUsername() 函数内部声明的变量属于块级作用域（local scope），函数执行完毕后即被销毁，sayUsername() 完全无法访问它。
✅ 正确做法：声明全局变量（基础解法）
将变量声明提升到全局作用域（即所有函数外部），使其在整个脚本中可读写：
// 在最外层声明（全局作用域）
let username; // 推荐：使用 let/const 替代已废弃的 var
function getUsername() {
username = document.getElementById("usernameBox").value; // 赋值，不重复声明
}
function sayUsername() {
alert(username); // 注意：原代码中拼写错误为 'userename'，已修正
}⚠️ 重要修正说明：
- 原答案中 alert(userename) 存在拼写错误（多了一个 e），应为 alert(username)；
- 全局声明时推荐使用 let 或 const（而非 var），因其具有更可预测的块级作用域行为，且避免变量提升带来的意外覆盖。
⚠️ 全局变量的风险与注意事项
- 命名污染：全局变量易与其他脚本冲突（如第三方库也定义了 username）；
- 可维护性差：难以追踪变量被何处修改，调试困难；
- 并发隐患：在多用户/异步场景（如表单反复提交）中，若未加校验，旧值可能被意外覆盖；
- 严格模式限制：在 'use strict' 下，未声明直接赋值（如 username = "abc"）会抛出 ReferenceError —— 因此显式声明全局变量必不可少。
✅ 更优替代方案（推荐用于实际项目）
| 方案 | 示例 | 优势 |
|---|---|---|
| 模块封装（ES6+） | export let username; + import { username } from './state.js'; | 隔离作用域，支持 tree-shaking，符合现代工程规范 |
| 闭包 + 工厂函数 | const createSession = () => { let u; return { set: v => u = v, get: () => u }; } | 数据私有化，避免全局污染 |
| 单例状态对象 | const AppState = { username: '', setPassword(v) { this.username = v; } }; | 显式管理，便于扩展和测试 |
✅ 最小可用示例（含 HTML）
<input id="usernameBox" placeholder="Enter username">
<button onclick="getUsername()">Save</button>
<button onclick="sayUsername()">Show</button>
<script>
let username = ''; // 初始化，避免 undefined 弹窗
function getUsername() {
username = document.getElementById("usernameBox").value.trim();
if (!username) alert('Username cannot be empty!');
}
function sayUsername() {
if (username) alert(`Hello, ${username}!`);
else alert('No username saved yet.');
}
</script>总结：虽然将变量声明在全局作用域能快速解决跨函数访问问题，但应优先考虑封装性更强、更安全的状态管理方式。对于学习阶段，理解 let/const 的作用域规则比滥用全局变量更重要——真正掌握“何时该用全局”，才是进阶的关键。
立即学习“Java免费学习笔记（深入）”；
