为何修改对象内函数未改变外部变量？JS引用问题解析

这个问题其实是搞混了变量引用和对象属性引用的关系，我来一步步给你拆解清楚：

先看你的代码：

let callback2 = () => console.warn('Old one'); 
let props2 = { callback2 }; 
function test(props) { 
  props.callback2 = () => console.warn('siema'); 
} 
test(props2); 
callback2(); 

步骤1：变量与对象属性的初始关联 #

• 第一行代码中，callback2是一个独立变量，它指向了一个打印Old one的箭头函数。
• 第二行的{ callback2 }是对象字面量的简写语法，等价于{ callback2: callback2 }——这时候对象的callback2属性只是复制了变量callback2的引用。也就是说，变量callback2和props2.callback2现在都指向同一个函数，但它们是两个完全独立的"指针"。

步骤2：修改对象属性的本质 #

当你调用test(props2)时，函数内部把props.callback2重新赋值为一个新的箭头函数（打印siema）。这一步操作只改变了对象属性的引用指向，和原来的callback2变量没有任何关系——变量callback2依然指向最初那个打印Old one的函数。

举个更直观的类比 #

你可以把这个逻辑理解成基础类型的赋值：

let a = 1;
let obj = { a }; // obj.a 现在等于1，和变量a的值相同
obj.a = 2; // 修改obj的a属性
console.log(a); // 输出还是1，因为变量a和obj.a是独立的

对于函数这类引用类型，原理完全一致：变量和对象属性只是持有同一个引用的副本，修改其中一个的指向，不会影响另一个。

如果想实现你的预期结果怎么办？ #

如果你希望修改对象属性后，原变量的调用结果也改变，需要让变量指向对象的属性，而不是直接指向函数：

let props2 = { callback2: () => console.warn('Old one') };
function test(props) {
  props.callback2 = () => console.warn('siema');
}
test(props2);
props2.callback2(); // 现在会输出'siema'

内容的提问来源于stack exchange，提问作者Patryk Janik