为什么对象解构在样式中无法运行？

Question

HTML元素是一个对象。样式也是一个对象。那么为什么这段代码不起作用呢？如果不使用解构，一切都正常，所以这不是一个大问题，我只是想知道原因。

const changeColor = () => {
  const div = document.querySelector("div");
  let {color, background} = div.style;
  color = "red";
  background = "blue";
}

div{
  width: 300px;
  height: 150px;
  color: blue;
  background: red;
}

<div onClick = "changeColor()">
  <p>Example</p>
</div>

- Gergő Horváth

---

解构赋值并不是那样工作的。你只是在分配局部变量。 - SLaks

它确实可以工作，但是你需要执行 Object.assign(div.style, { color, background })。 - Patrick Roberts

Answer 1

解构只是创建新的局部变量，这意味着

let {color, background} = div.style

本质上等同于

let color = div.style.color
let background = div.style.background

如果您在这些行之后跟随这些行

color = "red"
background = "blue"

您并没有给任何东西分配一个新的对象属性，您只是为本地变量分配了新值。

- zzzzBov

Answer 2

This:

const changeColor = () => {
  const div = document.querySelector("div");
  let {color, background} = div.style;       // ***
  color = "red";
  background = "blue";
};

这段代码与其他代码完全相同，只是div.style只会被计算一次：

const changeColor = () => {
  const div = document.querySelector("div");
  let color = div.style.color;               // ***
  let background = div.style.background;     // ***
  color = "red";
  background = "blue";
};

在任何情况下，改变局部变量都不会对对象属性产生影响。局部变量获得了对象属性的值，它没有持久性地链接回对象属性。

换句话说：解构只是创建局部变量，它不会创建一个对象，它是一种“视图”，提供对原始对象属性的访问器。（这可能很有趣，但这不是解构的作用）

不过，你可以这样做：

const changeColor = () => {
  const {style} = document.querySelector("div");
  style.color = "red";
  style.background = "blue";
};

这能够实现是因为我们获取到了div的style对象的引用，并直接修改其属性。

或者完全不使用解构：

const changeColor = () => {
  Object.assign(document.querySelector("div").style, {
      color: "red",
      background: "blue"
  });
};

如果函数接受这些参数，那么：

const changeColor = (color, background) => {
  Object.assign(document.querySelector("div").style, {color, background});
};

你可以通过changeColor("red", "blue");调用它。

- T.J. Crowder

---

也可以使用 Object.assign(style, { color, background })。 - Patrick Roberts

@PatrickRoberts - 设置本地变量后，是的（div.style）。 - T.J. Crowder