JavaScript中如何在函数外部调用函数内定义的全局变量

首先明确：你代码里的selectedItem是全局变量（在函数外部声明），函数内只是对这个全局变量重新赋值，不存在“函数内定义的全局变量无法外部调用”的问题。你外部的console.log拿不到更新后的值，核心原因是执行时机不对。

为什么会出现这个现象？ #

• 页面加载时，外部的console.log会立即执行，此时下拉框还没触发change事件，selectedItem还是初始的空字符串''。
• 函数内的console.log是在用户切换下拉选项、触发change事件后才执行，这时候已经给selectedItem赋了新值，所以能打印出正确结果。另外注意你的代码里有笔误：consol.log应该写成console.log。

如何获取更新后的selectedItem值？ #

想要拿到更新后的值，必须在change事件触发之后去读取它，常见的实现方式有两种：

• 方式一：在需要使用值的时机（比如按钮点击）去读取全局变量
• 方式二：把值的处理逻辑封装成函数，在change事件触发时调用它，或者后续需要时调用

修正后的示例代码 #

var selectedItem = '';

// 修正笔误后的事件监听
document.getElementById('select-option').addEventListener('change', function () {
  selectedItem = this.value;
  console.log('Selected Item (inside event):', selectedItem); 
});

// 方式一：通过按钮点击获取最新值
document.getElementById('get-value-btn').addEventListener('click', function() {
  console.log('Selected Item (on button click):', selectedItem);
});

// 方式二：封装处理函数
function handleSelectedItem() {
  console.log('Selected Item (from function):', selectedItem);
}
// 在change事件里调用处理函数
document.getElementById('select-option').addEventListener('change', function () {
  selectedItem = this.value;
  handleSelectedItem();
});
// 后续其他逻辑需要时，直接调用handleSelectedItem()即可

额外提醒 #

如果是真的在函数内部定义全局变量（比如function(){ window.selectedItem = this.value; }），那外部同样可以通过selectedItem或window.selectedItem访问，本质还是全局作用域的变量，不存在调用障碍。

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