为何调用funcB后data.value仍为'value'？JS对象传参解析

这其实是JavaScript里引用类型传参规则和变量重新赋值的典型问题，咱们一步步拆解就清楚了：

先看funcA的执行逻辑 #

当你调用funcA(data)时：

• JavaScript里的对象属于引用类型，传递对象给函数参数时，本质是把对象在内存中的引用地址复制了一份，传给函数的形参data。
• 这时候函数内部的data和全局的data，指向的是同一块内存里的同一个对象。
• 所以data.key = 'data'是直接修改了这个共享对象的属性，全局的data自然会同步看到这个变化，这也是为什么console.log(data.key)输出data。

再看funcB的关键差异 #

调用funcB(data)时，事情发生了变化：

1. 一开始，形参data确实也拿到了全局对象的引用地址，和全局data指向同一个对象。
2. 但函数第一行执行了data = {}——这一步是给函数内部的形参data重新赋值了一个全新的空对象。也就是说，现在函数里的data已经和全局的data指向不同的内存地址了，两者彻底“分家”。
3. 后面的data.value = 'data'，只是修改了这个新对象的属性，和原来的全局对象没有任何关系。所以全局的data.value还是保持最初的'value'。

用通俗的例子类比 #

把对象比作一栋房子，引用地址就是房子的门牌号：

• 调用funcA相当于你拿到了房子的备用钥匙（复制了门牌号），进去修改了屋里的家具（对象属性），房主（全局data）回来肯定能看到变化。
• 调用funcB相当于你拿到备用钥匙后，直接丢了它，重新配了一把新房子的钥匙（重新赋值新对象），在新屋里折腾，和原来的房子完全没关系，房主自然看不到任何变化。

// 再贴一遍代码方便对照
function funcA(data) { data.key = 'data'; }
function funcB(data) { data = {}; data.value = 'data'; }
var data = { key: 'key', value: 'value' };
funcA(data);
funcB(data);
console.log(data.key); //data
console.log(data.value); //value

内容的提问来源于stack exchange，提问作者Nick Liu