本文旨在阐明JavaScript中函数赋值给对象属性的正常机制，并重点解析JSON.stringify在处理函数时的特殊行为。核心内容是，函数可以被成功赋值给对象，但JSON.stringify在序列化过程中会跳过函数类型的属性，导致其在JSON字符串中缺失，但这并非函数赋值失败，而是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不会序列化的数据类型：
函数 (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。这明确地证明了函数已被成功赋值。
总结与注意事项
函数赋值正常： 在JavaScript中，将函数赋值给对象属性是完全支持且正常工作的。您所遇到的并非JavaScript语言的“bug”。JSON.stringify的特性： JSON.stringify在序列化过程中会跳过函数 (function) 和 undefined 类型的值。这意味着，即使函数已成功赋值给对象属性，它们也不会出现在 JSON.stringify 的输出结果中。直接对函数本身进行 JSON.stringify 会返回 undefined。正确调试方法： 在调试时，如果需要检查对象是否包含函数，请直接使用 console.log(myObject.myFunction) 或 console.log(typeof myObject.myFunction)，而不是依赖 JSON.stringify 的输出。用途考量： JSON.stringify 主要用于数据交换，而函数通常不属于可交换的数据。如果确实需要序列化函数（例如，将其作为字符串存储），则需要手动将其转换为字符串（例如 func.toString()），但这通常不推荐，因为它涉及在接收端使用 eval() 或 new Function()，这可能带来安全风险和性能问题。
通过理解 JSON.stringify 的这些基本行为，可以避免在JavaScript开发中因其特性而产生的困惑。
以上就是深入理解JavaScript中函数赋值与JSON.stringify的行为的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1526247.html
微信扫一扫 
支付宝扫一扫 
![Go语言接口与切片：如何识别和操作[]interface{}](https://cdn.chuangxiangniao.com/www/2025/12/176369856569294-1.jpg?imageMogr2/crop/480x300/gravity/center)
