JavaScript map 方法中函数闭包变量捕获机制详解

const cars = [
  {name: "Saab", type: "car" },
  {name: "Volvo", type: "car" },
  {name: "BMW", type: "car"}
];

const dataTest = cars.map(item => {
  const renderData = {};
  renderData[item.name] = {
    render: (value) => {
      // 这里的 item.type 看起来没有被替换
      myFunction(value, item.type);
    },
  };
  console.log('Item type during map:', item.type); // 这一行会输出正确的 'car'
  return renderData;
});

console.log('Generated Data Structure:', dataTest);
/*
  当打印 dataTest 时，你可能会看到类似以下结构：
  [
    { Saab: { render: value => { myFunction(value, item.type); } } },
    { Volvo: { render: value => { myFunction(value, item.type); } } },
    { BMW: { render: value => { myFunction(value, item.type); } } }
  ]
  注意：这里的 item.type 仍然是字面量，而不是 'car'
*/

// 模拟 myFunction
function myFunction(v, t) {
  console.log(`调用 myFunction - 值: ${v}, 类型: ${t}`);
}

const carsWithTypes = [
  {name: "Saab", type: "car1" },
  {name: "Volvo", type: "car2" },
  {name: "BMW", type: "car3"}
];

const processedData = carsWithTypes.map(item => {
  const entry = {};
  entry[item.name] = {
    render: (value) => {
        myFunction(value, item.type); // 这里的 item.type 会在函数执行时被正确解析
      },
  };
  return entry;
});

// 打印 processedData 的结构，仍然会看到 item.type 字面量
console.log('处理后的数据结构 (未执行 render):', JSON.stringify(processedData, null, 2));

// 现在，我们来调用 render 函数，观察实际输出
console.log('\n--- 执行 render 函数 ---');
processedData[0].Saab.render("foo"); // 预期输出: 调用 myFunction - 值: foo, 类型: car1
processedData[1].Volvo.render("bar"); // 预期输出: 调用 myFunction - 值: bar, 类型: car2
processedData[2].BMW.render("baz"); // 预期输出: 调用 myFunction - 值: baz, 类型: car3

处理后的数据结构 (未执行 render): [
  {
    "Saab": {
      "render": "function (value) { myFunction(value, item.type); }" // 注意这里 JSON.stringify 对函数处理
    }
  },
  {
    "Volvo": {
      "render": "function (value) { myFunction(value, item.type); }"
    }
  },
  {
    "BMW": {
      "render": "function (value) { myFunction(value, item.type); }"
    }
  }
]

--- 执行 render 函数 ---
调用 myFunction - 值: foo, 类型: car1
调用 myFunction - 值: bar, 类型: car2
调用 myFunction - 值: baz, 类型: car3