JavaScript中getJSON的匿名回调函数为何能获取解析后的JSON数据？

核心逻辑拆解 #

你混淆的点本质是没区分「函数定义留参数占坑」和「实际调用传值」两个阶段的执行顺序，理清楚下面两步就懂了：

• 定义getJSON时，第二个形参callback只是要求「你调用我时要传一个函数进来」，你完全可以把这个形参改名叫fn、handler都不影响逻辑，它只是个用来存你传入的函数的变量。
• 当异步请求成功、getJSON内部生成好解析后的data变量后，代码里执行了callback(data)——这一步就是主动调用你之前传进来的匿名函数，并且把data作为第一个实参传给这个匿名函数。

你调用getJSON时写的匿名函数(json) => {console.log(json)}里的json，就是这个匿名函数的第一个形参，它会自动接住调用时传进来的第一个实参，也就是getJSON内部的data。这里形参命名完全自由，你写成(res) =>、(result) =>都能拿到同样的值，只要位置对应就行。

简化类比 #

你可以把上面的异步逻辑剥离，用最简单的同步代码类比，逻辑是完全一致的：

// 定义工具函数，第二个参数要求传入函数
function calculate(a, callback) {
  let innerResult = a * 2 + 3; // 对应你原代码里解析接口得到的data
  callback(innerResult); // 调用传入的函数，把内部计算好的值传出去
}

// 调用工具函数，传入匿名函数
calculate(5, (outerParam) => {
  console.log(outerParam); // 输出13，对应你原代码里拿到的json
})

对应回你的原代码 #

let people = 'http://api.open-notify.org/astros.json';
let show = document.getElementById('people');

function getJSON(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = () => {
    if(xhr.status === 200) {
      let data = JSON.parse(xhr.responseText);
      // 这里就是主动调用你传入的匿名函数，把data作为实参传进去
      return callback(data);
    }
  };
  xhr.send();
}

// 这里传入的匿名函数的第一个形参json，就会接住上面调用时传的data
getJSON(people, (json) => {
  console.log(json);}
);

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