TypeScript中赋值对象方法后新对象为何多出原对象属性？

原代码示例 #

type ObjectDescriptor<D, M> = {
  data?: D;
  methods?: M & ThisType<D & M>; // Type of 'this' in methods is D & M
};

function makeObject<D, M>(desc: ObjectDescriptor<D, M>): D & M {
  let data: object = desc.data || {};
  let methods: object = desc.methods || {};
  return { ...data, ...methods } as D & M;
}

let obj123 = makeObject({
  data: {
    x: 20,
    y: 50,
    moveBy(dx: number, dy: number) {
      this.x += dx; // Strongly typed this
      this.y += dy; // Strongly typed this
    },
  },
  methods: { x: 0, y: 0 },
});

console.dir(obj123);

const nemObj = { method: obj123.moveBy };

nemObj.method(5, 5);
// console.dir(nemObj); // here newObj also getting two extra property x and y but how????

核心原因：JavaScript中this的动态绑定机制 #

当你把obj123.moveBy赋值给nemObj.method后，方法的this指向完全由调用方式决定：

• 原本obj123.moveBy作为obj123的方法调用时，this指向obj123。
• 但通过nemObj.method()调用时，this会绑定到调用该方法的对象nemObj。

在moveBy方法内部执行this.x += dx时：

1. JavaScript会先在nemObj上查找x属性，发现不存在。
2. 由于nemObj是普通对象（默认非严格模式），赋值操作会自动在nemObj上创建x属性，初始化为undefined后加上dx的值，最终变为5。
3. 同理，y属性也会被自动创建并赋值为5。

补充：TypeScript类型提示的局限性 #

TypeScript的ThisType<D & M>只是编译时的类型约束，让你编写moveBy时认为this是包含x、y的对象，但它无法改变JavaScript运行时的this绑定规则，运行时的this指向依然由调用场景决定。

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