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开发中因其特性而产生的困惑。
