JS初学者求助：为何变量APPLE_price外部输出为Undefined？

嘿，我完全明白你作为JS初学者的困惑——这个问题其实是JavaScript异步编程的经典坑，咱们一步步拆解清楚：

核心原因：异步操作的时序问题 #

你调用的invest.stock()是一个异步函数（因为它内部在做GET请求这种耗时的网络操作）。JavaScript的异步逻辑是这样的：

• 代码执行到invest.stock()时，会先发起网络请求，然后立刻跳过这个函数，继续执行后面的代码（也就是你外部的console.log(APPLE_price)）。
• 只有当网络请求完成、JSON数据下载好之后，才会触发你传入的回调函数，给APPLE_price赋值。

所以你外部的console.log其实是在变量被赋值之前就运行了，这时候变量要么还没声明，要么声明了但没值，自然输出undefined。

就算你提前在外部声明变量也没用，比如：

var APPLE_price; // 提前声明
invest.stock('APPLE', function (err, data) { 
  if (err) { 
    console.log('ERROR', err); 
    return; 
  } 
  APPLE_price = data.order[0]['price']; 
  console.log(APPLE_price); // 这里能正常输出，因为回调此时才执行
}); 
console.log(APPLE_price); // 还是undefined，因为回调还没来得及赋值

时序问题没解决，外部的log依然会先跑。

解决方案 #

方案1：把变量的使用逻辑放到回调内部 #

既然只有回调函数执行时变量才有值，那所有需要用到APPLE_price的代码都应该写在回调里，或者放到一个被回调调用的函数中：

invest.stock('APPLE', function (err, data) { 
  if (err) { 
    console.log('ERROR', err); 
    return; 
  } 
  var APPLE_price = data.order[0]['price']; 
  console.log(APPLE_price); 
  // 把所有需要用股价的逻辑都写在这里
  calculateDailyChange(APPLE_price);
}); 

// 专门处理股价的函数
function calculateDailyChange(price) {
  console.log(`当前苹果股价：${price}`);
  // 这里可以写你的业务逻辑
}

方案2：用Promise + async/await（更现代的写法） #

如果想让异步代码看起来像同步代码一样好理解，可以把回调风格的函数包装成Promise，再用async/await来处理：

// 先把invest.stock包装成Promise
function getStockPrice(symbol) {
  return new Promise((resolve, reject) => {
    invest.stock(symbol, (err, data) => {
      if (err) {
        reject(err); // 请求失败时抛出错误
      } else {
        resolve(data.order[0]['price']); // 请求成功时返回股价
      }
    });
  });
}

// 用async函数来等待异步操作完成
async function fetchApplePrice() {
  try {
    const APPLE_price = await getStockPrice('APPLE');
    console.log(APPLE_price);
    // 这里可以直接使用APPLE_price，因为await会等Promise完成后才继续执行
  } catch (err) {
    console.log('ERROR', err);
  }
}

// 调用这个async函数
fetchApplePrice();

总结 #

JavaScript的异步操作不会“卡住”代码等待结果，所以一定要确保使用变量的时机是在赋值完成之后。回调函数是最基础的处理方式，而Promise+async/await是现在更推荐的、可读性更高的写法，你可以慢慢熟悉～

内容的提问来源于stack exchange，提问作者Felipe Costa Goes