JavaScript函数内修改空对象后外部访问返回undefined如何解决

• 异步执行顺序问题：navigator.geolocation.getCurrentPosition() 是浏览器提供的异步API，调用后不会立刻执行传入的showPosition回调函数，会优先执行当前所有同步代码。你末尾的console.log(user_location.lon)是同步代码，执行时showPosition还未被触发，user_location仍然是初始的空对象，访问未定义的属性自然返回undefined。
• 赋值逻辑错误：原代码给属性赋值的写法存在逻辑问题：

  // 原错误写法
  user_location.lat = position.coords.latitude,  position.coords.longitude
  user_location.lon = position.coords.latitude,  position.coords.longitude
  

  这里的逗号运算符会导致只把第一个表达式的值赋给属性，而且给lon赋值时错误引用了latitude（纬度），就算执行顺序没问题，拿到的lon值也是错误的。

1. 首先修正属性赋值逻辑，正确给lat存纬度、lon存经度
2. 处理异步逻辑，确保只有在getCurrentPosition回调触发、属性赋值完成后，再访问user_location的对应属性，推荐用Promise+async/await封装异步逻辑，写法更清晰：

"use strict"
let user_location = {};

// 将定位功能封装为Promise
function getLocation() {
  return new Promise((resolve, reject) => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(resolve, reject);
    } else {
      reject(new Error("Geolocation is not supported by this browser."));
    }
  })
}

// 用async/await控制执行顺序
async function main() {
  try {
    const position = await getLocation();
    // 修正赋值逻辑
    user_location.lat = position.coords.latitude;
    user_location.lon = position.coords.longitude;
    // 所有需要用到user_location的逻辑都放在此处执行
    console.log(user_location.lon);
  } catch (err) {
    console.log(err.message);
  }
}

main();

如果业务逻辑比较简单，也可以直接把需要用到定位数据的逻辑全部放到showPosition回调函数内部执行即可。

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