本文详解如何在 JavaScript 函数中正确修改并保留外部作用域变量的值，重点解决因重复使用 let 导致的变量遮蔽（shadowing）问题，并提供可复用的代码范式与关键注意事项。
本文详解如何在 javascript 函数中正确修改并保留外部作用域变量的值，重点解决因重复使用 `let` 导致的变量遮蔽（shadowing）问题，并提供可复用的代码范式与关键注意事项。
在 JavaScript 中，若希望函数内部的操作能影响函数外部已声明的变量，必须确保不重新声明同名变量。否则，let（或 const/var）会在函数作用域内创建一个全新的局部变量，导致外部变量保持不变——这种现象称为“变量遮蔽”（variable shadowing）。
以原始代码为例：
let computerChoice = "";
let playerChoice = "";
const gameChoices = ["rock", "paper", "scissors"];
function getComputerChoice() {
const randomNumber = Math.floor(Math.random() * 3);
let computerChoice = gameChoices[randomNumber]; // ❌ 错误：此处 `let` 创建了新的局部变量
return computerChoice;
}
function getPlayerChoice() {
let playerChoice = prompt("Do you choose Rock, Paper or Scissors?").toLowerCase(); // ❌ 同样遮蔽了外部变量
return playerChoice;
}虽然函数返回了新值，但 computerChoice 和 playerChoice 的外部变量从未被赋值，因此执行以下代码时输出仍为空字符串：
getComputerChoice(); console.log(computerChoice); // → ""（未改变！） getPlayerChoice(); console.log(playerChoice); // → ""（未改变！）
✅ 正确做法是：仅在首次声明时使用 let；后续赋值直接使用变量名，不加声明关键字：
立即学习“Java免费学习笔记（深入）”；
let computerChoice = "";
let playerChoice = "";
const gameChoices = ["rock", "paper", "scissors"];
function getComputerChoice() {
const randomNumber = Math.floor(Math.random() * 3);
computerChoice = gameChoices[randomNumber]; // ✅ 正确：直接赋值，修改外部变量
console.log("Computer chose:", computerChoice);
return computerChoice;
}
function getPlayerChoice() {
playerChoice = prompt("Do you choose Rock, Paper or Scissors?").toLowerCase(); // ✅ 正确：无 `let`
return playerChoice;
}
// 调用并验证
getComputerChoice();
console.log("External computerChoice:", computerChoice); // → e.g., "paper"
getPlayerChoice();
console.log("External playerChoice:", playerChoice); // → e.g., "rock"? 关键注意事项：
- let 和 const 具有块级作用域且禁止重复声明，在函数内对同名变量使用 let 会隐式创建局部变量，与外部无关；
- 若函数仅用于赋值，可省略 return（但建议保留以增强可测试性与组合性）；
- 更健壮的实践是显式返回值并在外部赋值（推荐），避免依赖副作用：
computerChoice = getComputerChoice(); // 明确赋值，逻辑更清晰、易调试 playerChoice = getPlayerChoice();
这种方式不仅语义明确，还便于单元测试、函数复用和状态追踪，符合现代 JavaScript 的可维护性原则。
