ES6模块解构导出绑定疑问：如何保留原对象属性引用？

你的猜测完全正确：export const { foo } = thing确实创建了一个独立的不可变绑定。解构操作会把thing.foo当时的函数值直接赋值给新的foo变量，再将这个变量导出。后续修改thing.foo时，这个独立的foo绑定不会同步更新——因为它从一开始就和原对象的属性断开了关联。

要让导出的foo始终指向原对象属性的最新值，也就是保留对原对象的引用，有几种实用方案：

方案1：导出访问器函数 #

不用直接导出foo，而是导出一个返回thing.foo的函数，每次调用都会获取最新的属性值：

// thing.js
let thing = {
  foo: (x) => console.log(x)
};

const init = () => {
  thing.foo = (x) => console.log("updated");
};

export { init, thing };
export const getFoo = () => thing.foo;

导入端调用方式：

// index.js
import { getFoo, thing, init } from "./thing";

init();
getFoo()("test"); // 输出"updated"

方案2：导出带getter的包装对象 #

如果想保持类似属性的访问体验，可以导出一个带有getter的对象，每次访问foo都会动态拉取原对象的最新值：

// thing.js
let thing = {
  foo: (x) => console.log(x)
};

const init = () => {
  thing.foo = (x) => console.log("updated");
};

export { init, thing };
export const fooWrapper = {
  get foo() {
    return thing.foo;
  }
};

导入端使用方式：

// index.js
import { fooWrapper, thing, init } from "./thing";

init();
fooWrapper.foo("test"); // 输出"updated"

不推荐的方案：手动同步变量 #

你也可以将foo定义为一个和thing.foo关联的变量，每次更新thing.foo时手动同步这个变量：

// thing.js
let thing = {
  foo: (x) => console.log(x)
};
let foo = thing.foo;

const init = () => {
  thing.foo = (x) => console.log("updated");
  foo = thing.foo; // 手动同步导出的foo变量
};

export { init, thing, foo };

这种方法虽然能实现需求，但需要手动维护同步逻辑，容易遗漏出错，因此不推荐。

核心原理回顾 #

ES6模块的导出是实时绑定而非值拷贝，但只有当导出的是同一个变量的引用时才会同步。解构导出本质是创建了新变量并赋值，这个新变量和原对象属性没有绑定关系，自然不会跟随原属性更新。通过访问器动态获取，才能始终拿到原对象的最新状态。

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