深入理解JavaScript中函数赋值与JSON.stringify的行为

JavaScript中函数作为对象属性

在javascript中，函数是第一类公民，这意味着它们可以像其他任何值（如字符串、数字或布尔值）一样被赋值给变量、作为参数传递、从函数中返回，以及作为对象的属性。将一个函数赋值给一个对象的属性是完全合法的操作，并且是javascript中常见的编程模式，例如在定义对象方法或事件处理函数时。

考虑以下示例代码片段，它尝试在一个循环中创建函数并将其赋值给一个对象：

export function generate_api_calls(app_name) {
  let api_calls = {}
  api_calls['cameraFeed'] = `http://${hostname}:${camera_port}${CAMERA_FEED_URL}`

  let ff
  let items = [1, 2, 3, 4]
  for (let i in items) {
    let name = items[i]
    function bar(j) {
      logger.info(`bar ${j}`)
    };

    bar(i) // 函数在此处被成功调用
    ff = bar // 函数被成功赋值给变量 ff
    api_calls[name] = bar; // 函数被赋值给 api_calls 对象的属性
    logger.info(`generate_api_calls api ${name} ${JSON.stringify(api_calls)}`)
    logger.info(`generate_api_calls api ${JSON.stringify(api_calls[name])}`)
  }
  ff('00'); // 通过 ff 变量成功调用函数

  logger.info(`generate_api_calls 5 ${JSON.stringify(api_calls)}`)
  return api_calls
}

从上述代码的执行日志中可以看到，bar(i) 和 ff('00') 都成功执行，这表明函数 bar 被正确创建并赋值给了 ff 变量。同样，当 api_calls[name] = bar; 执行时，函数 bar 确实被赋值给了 api_calls 对象的对应属性。

然而，日志中 logger.info(generate_api_calls api ${JSON.stringify(api_calls[name])}) 输出 undefined，并且 JSON.stringify(api_calls) 的结果中也看不到被赋值的函数，这让开发者误以为函数赋值失败。这并非JavaScript的"bug"，而是与JSON.stringify的特定行为有关。

JSON.stringify的工作原理与局限性

JSON.stringify() 是JavaScript中用于将JavaScript值转换为JSON字符串的内置方法。它遵循JSON数据格式规范，该规范对可序列化的数据类型有明确的规定。

立即学习“Java免费学习笔记（深入）”；

JSON.stringify可以序列化的数据类型包括：

• 对象 (Object): 纯粹的JavaScript对象（字面量对象 {}），其可枚举的自身属性会被序列化。
• 数组 (Array): 数组中的所有元素都会被序列化。
• 字符串 (String): 字符串值。
• 数字 (Number): 数字值。
• 布尔值 (Boolean): true 或 false。
• null: null 值。

JSON.stringify不会序列化的数据类型：

钉钉 AI 助理

钉钉AI助理汇集了钉钉AI产品能力，帮助企业迈入智能新时代。

21

查看详情

• 函数 (Function): 无论是普通函数、箭头函数还是方法，JSON.stringify都会跳过它们，不会将其包含在最终的JSON字符串中。
• undefined: 当JSON.stringify遇到undefined值时，如果它是一个对象的属性值，该属性会被跳过；如果它是一个数组元素，该元素会被转换为null。
• Symbol: Symbol类型的值会被跳过。

因此，当您尝试对一个包含函数的对象进行 JSON.stringify 操作时，这些函数属性会被忽略。如果直接对一个函数本身调用 JSON.stringify，结果将是 undefined。

验证函数赋值的正确性

为了验证函数是否确实被赋值给了对象，而不是仅仅依赖JSON.stringify的输出，我们可以直接访问该属性或检查其类型。

以下是修改后的代码片段，展示了如何正确验证函数赋值：

const logger = {
  info: console.log, // 简化logger以直接输出到控制台
};

function generate_api_calls(app_name) {
  let api_calls = {};

  api_calls['cameraFeed'] = 'cameraFeed'; // 简化URL

  let ff;
  let items = [1, 2, 3, 4];
  for (let i in items) {
    let name = items[i];

    function bar(j) {
      logger.info(`bar ${j}`);
    };

    bar(i); // 确认函数可调用
    ff = bar; // 确认函数可赋值给变量
    api_calls[name] = bar; // 函数被赋值给对象属性

    // 关键验证点：直接打印对象属性，而不是其JSON字符串化结果
    console.log('watch me printing function --->', api_calls[name]); 
    console.log('watch me printing typeof function --->', typeof api_calls[name]); // 检查类型

    logger.info(`generate_api_calls api ${name} ${JSON.stringify(api_calls)}`); // 再次观察 JSON.stringify 的行为
    logger.info(`generate_api_calls api ${JSON.stringify(api_calls[name])}`); // 对函数进行 JSON.stringify 的结果
  }
  ff('00'); // 确认通过 ff 变量函数可调用

  // 关键验证点：直接打印整个 api_calls 对象
  console.log('watch me printing api_calls --->', api_calls);

  logger.info(`generate_api_calls 5 ${JSON.stringify(api_calls)}`); // 最终的 JSON.stringify 结果
  return api_calls
}

generate_api_calls('test');

// 额外示例：展示 JSON.stringify 忽略函数的行为
console.log('JSON.stringify with function:', JSON.stringify({
  data: 'abc',
  func: () => {},
  undef: undefined
})); // 输出 {"data":"abc"}

运行上述代码，您会观察到 console.log('watch me printing function --->', api_calls[name]); 会打印出函数本身的定义，而 console.log('watch me printing typeof function --->', typeof api_calls[name]); 会打印 function。这明确地证明了函数已被成功赋值。

总结与注意事项

1. 函数赋值正常： 在JavaScript中，将函数赋值给对象属性是完全支持且正常工作的。您所遇到的并非JavaScript语言的“bug”。
2. JSON.stringify的特性： JSON.stringify在序列化过程中会跳过函数 (function) 和 undefined 类型的值。这意味着，即使函数已成功赋值给对象属性，它们也不会出现在 JSON.stringify 的输出结果中。直接对函数本身进行 JSON.stringify 会返回 undefined。
3. 正确调试方法： 在调试时，如果需要检查对象是否包含函数，请直接使用 console.log(myObject.myFunction) 或 console.log(typeof myObject.myFunction)，而不是依赖 JSON.stringify 的输出。
4. 用途考量： JSON.stringify 主要用于数据交换，而函数通常不属于可交换的数据。如果确实需要序列化函数（例如，将其作为字符串存储），则需要手动将其转换为字符串（例如 func.toString()），但这通常不推荐，因为它涉及在接收端使用 eval() 或 new Function()，这可能带来安全风险和性能问题。

通过理解 JSON.stringify 的这些基本行为，可以避免在JavaScript开发中因其特性而产生的困惑。

以上就是深入理解JavaScript中函数赋值与JSON.stringify的行为的详细内容，更多请关注php中文网其它相关文章！