对象分配和对象传播之间的不同结果答案

【问题标题】：Different outcomes between Object assign and Object spread对象分配和对象传播之间的不同结果
【发布时间】：2023-03-03 15:52:01
【问题描述】：

我正在使用打字稿并编译为 ES2016。我注意到我在Function.prototype.call() 中调用了两个具有相似this 对象的不同函数。我试图通过使用一个公共对象来合并两个this 对象，该对象将在对象的开头使用...spread，就像这样

let selfShared = {
  props,
  // ...
};

let selfHost = {
  ...selfShared,
  // ...
};

let selfGuest = {
  ...selfShared,
  // ...
};

在乞求中使用传播的想法是，如果我认为合适，我可以覆盖 this 对象中的任何一个中的共享属性。但与使用扩展直接在this 对象中设置props 时不同，会产生奇怪的结果，这原来是因为tsc 将代码编译为

let selfShared = {
  props
};

let selfHost = Object.assign(Object.assign({}, selfShared), {
  // ...
});

// ...

使用我的代码

let state = undefined;
let attributes = {};
let selfShared = {
  props: attributes
};

let selfHost = {
  ...selfHost,
  get state() {
    console.log("selfHost get state");
    return state;
  },
  set state(originalStates) {
    console.log("selfHost set state");
    !state ? state = originalStates : console.error("`this.states` already defined in the host function.");
  }
}

输出看起来像

let state = undefined;
let attributes = {};
let selfShared = {
  props: attributes
};

let selfHost = Object.assign(
  Object.assign({}, selfShared), {
  get state() {
    console.log("selfHost get state");
    return state;
  },
  set state(originalStates) {
    console.log("selfHost set state");
    !state ? state = originalStates : console.error("`this.states` already defined in the host function.");
  }
});

现在至少在 firefox 74 到 77 上将两个代码插入控制台并添加

// ...
selfHost.state = {
  thing: "some"
};
selfHost.state = {
  some: "thing"
};

抛出不同的日志... 预编译的代码给了我两个set state 和一个错误，它们是预期的输出，但是编译后的代码给了我一个get state 并忽略了set state 输出中的规则

{
  some: "thing"
}

而不是预期的

{
  thing: "some"
}

和预编译的代码一样？

将spread设置到文件的底部编译为

let selfHost = Object.assign({
  get state() {
    console.log("selfHost get state");
    return state;
  },
  set state(originalStates) {
    console.log("selfHost set state");
    !state ? state = originalStates : console.error("`this.states` already defined in the host function.");
  }
}, selfShared);

它给出了正确的输出，但不允许我覆盖selfShared 给出的属性。

你能解释一下为什么 Object.assign 会发生这种情况吗？如果有一个技巧可以让我从 tsc 获得输出，仍然可以让我做我最初想做的事情？

【问题讨论】：

标签： javascript typescript tsc

【解决方案1】：

使用传播时

let obj = {
  ...otherObj,
  // ...
}

或

let obj = Object.assign({}, otherObj, {
  // ...
})

spread 被解释为字面量，这意味着在 polyfill 中属性被读取为严格值，这意味着正常值被正常读取，setter 被忽略，getter 被读取为正常值。

当价差最后写成时，Setter 和 getter 的工作方式与问题中所写的一样

let obj = {
  // ...
  ...otherObj
}

或

let obj = Object.assign({
  // ...
}, otherObj)

因为otherObj 只扩展了唯一的对象。

【讨论】：