JavaScript向递归函数传对象引用修改属性未生效怎么解决？

原因分析 #

JavaScript 中对象、数组均按引用传递，该问题与引用传递规则无关，由两处代码错误导致：

• 笔误：Parent 函数内调用的函数名为 myFunctionToUseObjects，与定义的递归函数 Child 名称不匹配，运行时会抛出未定义错误，首先需修正调用的函数名。
• 核心逻辑错误：Child 函数内对形参 emptyObjectForReference 执行了重新赋值操作。函数形参为存储引用副本的局部变量，直接给形参赋值只会修改局部变量的指向，不会影响外部原变量的指向，也不会修改原引用指向的对象内容。同时 Object.assign 第一个参数（目标对象）被设为 myBaseObject，所有合并操作均作用于 myBaseObject，与传入的空对象无关联。

修复方案 #

要直接修改传入的空对象内容，保持引用生效，调整 Object.assign 的参数顺序，直接修改传入对象，不对形参重新赋值即可：

function Parent() {
    const myBaseObject = {"data1": "123"}
    const emptyObjectForReference = {}
    // 修正函数调用名
    Child(myBaseObject, emptyObjectForReference)
    console.log(emptyObjectForReference)
}

function Child(myBaseObject, emptyObjectForReference) {
    // emptyObjectForReference作为目标对象，直接修改其内部属性
    Object.assign(emptyObjectForReference, myBaseObject, {"Children": "myChild"})
    // 递归场景下同理，只要始终修改对象属性而非重新赋值形参，引用会持续生效
}

运行上述代码即可输出预期结果。如果递归逻辑需要生成新的对象实例，也可选择每层递归 return 处理后的对象，上层调用将返回值赋值给对应属性即可，两种方案均可满足递归场景需求。

内容的提问来源于stack exchange，提问作者Jeppe Christensen