javascript - 工厂函数方法不更新变量

Question

我正在尝试使用一种方法来设置工厂函数，该方法会更新所述工厂函数中特定变量的值。这看起来很容易实现，但是，每当我测试它时，我得到的是变量的初始设置值，而不是更新后的值。我确信在涉及范围界定时我遗漏了一些细微差别，但这里到底发生了什么？

const factory = () => {
let color = "black"

const changeColor = () => {
    color = "white"
}

return {color, changeColor}
}

假设我实际上在某处使用了工厂函数:

const example = factory()
example.changeColor()

预期

example.color === "white"

实际:

example.color === "black"

我在这里错过了什么？运行 changeColor() 后，我本以为 color 会切换为白色，但每次检查时它仍然是黑色。

Answer 1

您是在闭包中分配给局部变量，而不是分配给包含原始颜色值副本的对象属性。

您可以使用 getter 使属性访问变量。

const factory = () => {
  let color = "black";

  const changeColor = () => {
    color = "white"
  };

  return {
    get color() {
      return color;
    },
    changeColor
  };
}

const example = factory();
example.changeColor();

console.log(example.color);

但真正正确的方法是让 changeColor 方法修改 this(你必须使用传统函数而不是箭头函数才能工作) .

const factory = function() {
  return {
    color: "black",
    changeColor: function() {
      this.color = "white"
    }
  };
}

const example = factory();
example.changeColor();

console.log(example.color);

或者您可以使用类或原型(prototype)。