javascript - 为什么在更新 DOM 元素的样式属性时对象展开失败但 Object.assign 成功？

Question

上下文

当使用 vanilla js 更新 DOM 元素的 style 属性时，为什么 object spread 无法更新而 Object.assign 成功？

例如，在包含的代码片段中，objectAssignDirect 和 objectAssignIndirect 正确设置了 background-color 而 objectSpread 错误重置结果 div 的 background-color。

问题

1. 为什么会这样？ (这是由于克隆问题还是继承属性等属性未被复制？)
2. 有没有一种方法可以通过对象传播来复制 Object.assign 所需的行为？

引用资料

有几个比较 Object.assign 和 object spread 的讨论，但似乎都没有解决这个奇怪的行为:

• Object spread vs. Object.assign
• Object.assign vs Object Spread in Node.js

// Using `Object.assign` directly.
const objectAssignDirect = () => { 
  Object.assign(document.querySelector('.myClass').style, { backgroundColor: 'red' }); // Works.
  console.log('Result should be red');
}

// Updating using `Object.assign` with variable.
const objectAssignIndirect = () => {
  const myElement = document.querySelector('.myClass')
  Object.assign(myElement.style, { backgroundColor: 'blue' }); // Works.
  console.log('Result should be blue');
}

// Using object spread with variable.
const objectSpread = () => {
  const myElement = document.querySelector('.myClass')
  myElement.style = { ...myElement.style, backgroundColor: 'green' }; // Fails.
  console.log('Result should be green');
}

body {
  font-size: 2em;
}

.myClass {
  width: 100%;
  height: 50px;
  background-color: black;
  color: white;
  border: 4px solid black;
  text-align: center;
  padding: 10px;
}

button {
  padding: 15px;
  margin: 30px;
  color: white;
  border-radius: 20px;
}

.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
.green {
  background-color: green;
}

<div style="display:flex;justify-content:center;">
  <button class="red" onclick="objectAssignDirect();">Use <code>Object.assign</code> directly</button>
  <button class="blue" onclick="objectAssignIndirect();">Use <code>Object.assign</code> indirectly</button>
  <button class="green" onclick="objectSpread();">Use object spread</button>
</div>

<div class="myClass">Result</div>

Answer 1

Why does this happen?

style是只读属性，不能分配给新值。

element.style = { ...element.style, backgroundColor: 'green' };

创建 element.style 的浅拷贝，添加/更新属性 backgroundColor 并将副本分配回 element.style。由于这个原因，它失败了，因为您不能为 element.style 分配一个新值。

Object.assign(element.style, { backgroundColor: 'green' });

将第二个参数中的每个属性/值对分配给 element.style。它不会创建 element.style 的副本，但会改变 element.style 对象。

Is there a way to replicate Object.assign's desired behaviour with object spread?

不，对象扩展仅用于对象字面量，这将始终导致创建新对象。您不能使用对象传播更新现有对象。