乐趣区

共享可变状态中出现的问题以及如何避免

jiezi

作者：Dr. Axel Rauschmayer

翻译：疯狂的技术宅

原文：https://2ality.com/2019/10/sh…

未经允许严禁转载

本文回答了以下问题：

  • 么是共享可变状态？
  • 为什么会出现问题？
  • 如何避免其问题？

标有“（高级）”的部分会更深入，如果你想更快地阅读本文，可以跳过。

什么是共享可变状态，为什么会有问题？

共享可变状态的解释如下：

  • 如果两个或多个参与方可以更改相同的数据（变量，对象等），并且
  • 如果它们的生命周期重叠，

则可能会有一方修改会导致另一方无法正常工作的风险。以下是一个例子：

function logElements(arr) {while (arr.length > 0) {console.log(arr.shift());
  }
}

function main() {const arr = ['banana', 'orange', 'apple'];

  console.log('Before sorting:');
  logElements(arr);

  arr.sort(); // changes arr

  console.log('After sorting:');
  logElements(arr); // (A)
}
main();

// Output:
// 'Before sorting:'
// 'banana'
// 'orange'
// 'apple'
// 'After sorting:'

这里有两个独立的部分：函数 logElements() 和函数main()。后者想要在对数组进行排序的前后都打印其内容。但是它到用了 logElements()，会导致数组被清空。所以 main() 会在 A 行输出一个空数组。

在本文的剩余部分，我们将介绍三种避免共享可变状态问题的方法：

  • 通过复制数据避免共享
  • 通过无损更新来避免数据变动
  • 通过使数据不可变来防止数据变动

针对每一种方法，我们都会回到刚才看到的示例并进行修复。

通过复制数据避免共享

在开始研究如何避免共享之前，我们需要看一下如何在 JavaScript 中复制数据。

浅拷贝与深拷贝

对于数据，有两个可复制的“深度”：

  • 浅拷贝 仅复制对象和数组的顶层条目。原始值和副本中的输入值仍然相同。
  • 深拷贝 还会复制条目值的条目。也就是说，它会完整遍历树，并复制所有节点。

不幸的是，JavaScript 仅内置了对浅拷贝的支持。如果需要深拷贝，则需要自己实现。

JavaScript 中的浅拷贝

让我们看一下浅拷贝的几种方法。

通过传播复制普通对象和数组

我们可以扩展为对象字面量和扩展为数组字面量进行复制：

const copyOfObject = {...originalObject};
const copyOfArray = [...originalArray];

但是传播有几个限制：

  • 不复制原型：
class MyClass {}

const original = new MyClass();
assert.equal(MyClass.prototype.isPrototypeOf(original), true);

const copy = {...original};
assert.equal(MyClass.prototype.isPrototypeOf(copy), false);
  • 正则表达式和日期之类的特殊对象有未复制的特殊“内部插槽”。
  • 仅复制自己的（非继承）属性。鉴于原型链的工作原理，这通常是最好的方法。但是你仍然需要意识到这一点。在以下示例中，copy 中没有 original 的继承属性 .inheritedProp，因为我们仅复制自己的属性，而未保留原型。
const proto = {inheritedProp: 'a'};
const original = {__proto__: proto, ownProp: 'b'};
assert.equal(original.inheritedProp, 'a');
assert.equal(original.ownProp, 'b');

const copy = {...original};
assert.equal(copy.inheritedProp, undefined);
assert.equal(copy.ownProp, 'b');
  • 仅复制可枚举的属性。例如数组实例自己的属性 .length 不可枚举，也不能复制：
const arr = ['a', 'b'];
assert.equal(arr.length, 2);
assert.equal({}.hasOwnProperty.call(arr, 'length'), true);

const copy = {...arr};
assert.equal({}.hasOwnProperty.call(copy, 'length'), false);
  • 与 property 的 attributes无关，它的副本始终是可写和可配置的 data 属性，例如：
const original = Object.defineProperties({}, {
  prop: {
    value: 1,
    writable: false,
    configurable: false,
    enumerable: true,
  },
});
assert.deepEqual(original, {prop: 1});

const copy = {...original};
// Attributes `writable` and `configurable` of copy are different:
assert.deepEqual(Object.getOwnPropertyDescriptors(copy), {
  prop: {
    value: 1,
    writable: true,
    configurable: true,
    enumerable: true,
  },
});

这意味着，getter 和 setter 都不会被如实地被复制：value 属性（用于数据属性），get 属性（用于 getter）和set 属性（用于 setter）是互斥的。

const original = {get myGetter() {return 123},
  set mySetter(x) {},};
assert.deepEqual({...original}, {
  myGetter: 123, // not a getter anymore!
  mySetter: undefined,
});
  • 拷贝很浅：该副本具有原始版本中每个键值条目的新版本，但是原始值本身不会被复制。例如：
const original = {name: 'Jane', work: {employer: 'Acme'}};
const copy = {...original};

// Property .name is a copy
copy.name = 'John';
assert.deepEqual(original,
  {name: 'Jane', work: {employer: 'Acme'}});
assert.deepEqual(copy,
  {name: 'John', work: {employer: 'Acme'}});

// The value of .work is shared
copy.work.employer = 'Spectre';
assert.deepEqual(original, {name: 'Jane', work: {employer: 'Spectre'}});
assert.deepEqual(copy, {name: 'John', work: {employer: 'Spectre'}});

这些限制有的可以消除，而其他则不能：

  • 我们可以在拷贝过程中为副本提供与原始原型相同的原型：
class MyClass {}

const original = new MyClass();

const copy = {__proto__: Object.getPrototypeOf(original),
  ...original,
};
assert.equal(MyClass.prototype.isPrototypeOf(copy), true);

另外，我们可以在副本创建后通过 Object.setPrototypeOf() 设置原型。

  • 没有简单的方法可以通用地复制特殊对象。
  • 如前所述，仅复制自己的属性是功能而非限制。

  • 我们可以用 Object.getOwnPropertyDescriptors() 和 Object.defineProperties() 复制对象（操作方法稍后说明）：

    • 他们考虑了所有属性（而不仅仅是 value），因此正确地复制了 getters，setters，只读属性等。
    • 用 Object.getOwnPropertyDescriptors() 检索可枚举和不可枚举的属性。
  • 我们将在本文后面的内容中介绍深拷贝。

通过 Object.assign() 进行浅拷贝（高级）

Object.assign()的工作原理就像传播到对象中一样。也就是说以下两种复制方式大致相同：

const copy1 = {...original};
const copy2 = Object.assign({}, original);

使用方法而不是语法的好处是可以通过库在旧的 JavaScript 引擎上对其进行填充。

不过 Object.assign() 并不完全像传播。它在一个相对微妙的方面有所不同：它以不同的方式创建属性。

  • Object.assign() 使用 assignment 创建副本的属性。
  • 传播 定义 副本中的新属性。

除其他事项外，assignment 会调用自己的和继承的设置器，而 definition 不会（关于 assignment 与 definition 的更多信息）。这种差异很少引起注意。以下代码是一个例子，但它是人为设计的：

const original = {['__proto__']: null};
const copy1 = {...original};
// copy1 has the own property '__proto__'
assert.deepEqual(Object.keys(copy1), ['__proto__']);

const copy2 = Object.assign({}, original);
// copy2 has the prototype null
assert.equal(Object.getPrototypeOf(copy2), null);

通过 Object.getOwnPropertyDescriptors() 和 Object.defineProperties() 进行浅拷贝（高级）

JavaScript 使我们可以通过 属性描述符 创建属性，这些对象指定属性属性。例如，通过 Object.defineProperties()，我们已经看到了它。如果将该方法与 Object.getOwnPropertyDescriptors()结合使用，则可以更加忠实地进行复制：

function copyAllOwnProperties(original) {
  return Object.defineProperties({}, Object.getOwnPropertyDescriptors(original));
}

这消除了通过传播复制对象的两个限制。

首先，能够正确复制自己 property 的所有 attribute。我们现在可以复制自己的 getter 和 setter：

const original = {get myGetter() {return 123},
  set mySetter(x) {},};
assert.deepEqual(copyAllOwnProperties(original), original);

其次，由于使用了 Object.getOwnPropertyDescriptors()，非枚举属性也被复制了：

const arr = ['a', 'b'];
assert.equal(arr.length, 2);
assert.equal({}.hasOwnProperty.call(arr, 'length'), true);

const copy = copyAllOwnProperties(arr);
assert.equal({}.hasOwnProperty.call(copy, 'length'), true);

JavaScript 的深拷贝

现在该解决深拷贝了。首先我们将手动进行深拷贝，然后再研究通用方法。

通过嵌套传播手动深拷贝

如果嵌套传播，则会得到深层副本：

const original = {name: 'Jane', work: {employer: 'Acme'}};
const copy = {name: original.name, work: {...original.work}};

// We copied successfully:
assert.deepEqual(original, copy);
// The copy is deep:
assert.ok(original.work !== copy.work);

Hack：通过 JSON 进行通用深拷贝

尽管这是一个 hack，但是在紧要关头，它提供了一个快速的解决方案：为了对 `original 对象进行深拷贝”，我们首先将其转换为 JSON 字符串，然后再解析该它：

function jsonDeepCopy(original) {return JSON.parse(JSON.stringify(original));
}
const original = {name: 'Jane', work: {employer: 'Acme'}};
const copy = jsonDeepCopy(original);
assert.deepEqual(original, copy);

这种方法的主要缺点是，我们只能复制具有 JSON 支持的键和值的属性。

一些不受支持的键和值将被忽略：

assert.deepEqual(
  jsonDeepCopy({[Symbol('a')]: 'abc',
    b: function () {},
    c: undefined,
  }),
  {} // empty object);

其他导致的例外：

assert.throws(() => jsonDeepCopy({a: 123n}),
  /^TypeError: Do not know how to serialize a BigInt$/);

实现通用深拷贝

可以用以下函数进行通用深拷贝：

function deepCopy(original) {if (Array.isArray(original)) {const copy = [];
    for (const [index, value] of original.entries()) {copy[index] = deepCopy(value);
    }
    return copy;
  } else if (typeof original === 'object' && original !== null) {const copy = {};
    for (const [key, value] of Object.entries(original)) {copy[key] = deepCopy(value);
    }
    return copy;
  } else {
    // Primitive value: atomic, no need to copy
    return original;
  }
}

该函数处理三种情况：

  • 如果 original 是一个数组，我们创建一个新的 Array，并将 original 的元素复制到其中。
  • 如果 original 是一个对象，我们将使用类似的方法。
  • 如果 original 是原始值，则无需执行任何操作。

让我们尝试一下deepCopy() ：

const original = {a: 1, b: {c: 2, d: {e: 3}}};
const copy = deepCopy(original);

// Are copy and original deeply equal?
assert.deepEqual(copy, original);

// Did we really copy all levels
// (equal content, but different objects)?
assert.ok(copy     !== original);
assert.ok(copy.b   !== original.b);
assert.ok(copy.b.d !== original.b.d);

注意，deepCopy() 仅解决了一个扩展问题：浅拷贝。而其他所有内容：不复制原型，仅部分复制特殊对象，忽略不可枚举的属性，忽略大多数属性。

通常完全完全实现复制是不可能的：并非所有数据的都是一棵树，有时你并不需要所有属性，等等。

更简洁的 deepCopy() 版本

如果我们使用 .map() 和 Object.fromEntries()，可以使以前的 deepCopy() 实现更加简洁：

function deepCopy(original) {if (Array.isArray(original)) {return original.map(elem => deepCopy(elem));
  } else if (typeof original === 'object' && original !== null) {
    return Object.fromEntries(Object.entries(original)
        .map(([k, v]) => [k, deepCopy(v)]));
  } else {
    // Primitive value: atomic, no need to copy
    return original;
  }
}

在类中实现深拷贝（高级）

通常使用两种技术可以实现类实例的深拷贝：

  • .clone() 方法
  • 复制构造函数
.clone() 方法

该技术为每个类引入了一个方法 .clone()，其实例将被深拷贝。它返回 this 的深层副本。以下例子显示了可以克隆的三个类。

class Point {constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  clone() {return new Point(this.x, this.y);
  }
}
class Color {constructor(name) {this.name = name;}
  clone() {return new Color(this.name);
  }
}
class ColorPoint extends Point {constructor(x, y, color) {super(x, y);
    this.color = color;
  }
  clone() {
    return new ColorPoint(this.x, this.y, this.color.clone()); // (A)
  }
}

A 行展示了此技术的一个重要方面：复合实例属性值也必须递归克隆。

静态工厂方法

拷贝构造函数 是用当前类的另一个实例来设置当前实例的构造函数。拷贝构造函数在静态语言（例如 C++ 和 Java）中很流行，你可以在其中通过 static 重载（static 表示它在编译时发生）提供构造函数的多个版本。

在 JavaScript 中，你可以执行以下操作（但不是很优雅）：

class Point {constructor(...args) {if (args[0] instanceof Point) {
      // Copy constructor
      const [other] = args;
      this.x = other.x;
      this.y = other.y;
    } else {const [x, y] = args;
      this.x = x;
      this.y = y;
    }
  }
}

这是使用方法：

const original = new Point(-1, 4);
const copy = new Point(original);
assert.deepEqual(copy, original);

相反，静态工厂方法 在 JavaScript 中效果更好（static 意味着它们是类方法）。

在以下示例中，三个类 Point，Color 和 ColorPoint 分别具有静态工厂方法 .from()：

class Point {constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  static from(other) {return new Point(other.x, other.y);
  }
}
class Color {constructor(name) {this.name = name;}
  static from(other) {return new Color(other.name);
  }
}
class ColorPoint extends Point {constructor(x, y, color) {super(x, y);
    this.color = color;
  }
  static from(other) {
    return new ColorPoint(other.x, other.y, Color.from(other.color)); // (A)
  }
}

在 A 行中，我们再次使用递归复制。

这是 ColorPoint.from() 的工作方式：

const original = new ColorPoint(-1, 4, new Color('red'));
const copy = ColorPoint.from(original);
assert.deepEqual(copy, original);

拷贝如何帮助共享可变状态？

只要我们仅从共享状态读取，就不会有任何问题。在修改它之前，我们需要通过复制（必要的深度）来“取消共享”。

防御性复制 是一种在问题可能出现时始终进行复制的技术。其目的是确保当前实体（函数、类等）的安全：

  • 输入：复制（潜在地）传递给我们的共享数据，使我们可以使用该数据而不受外部实体的干扰。
  • 输出：在将内部数据公开给外部方之前复制内部数据，意味着不会破坏我们的内部活动。

请注意，这些措施可以保护我们免受其他各方的侵害，同时也可以保护其他各方免受我们的侵害。

下一节说明两种防御性复制。

复制共享输入

请记住，在本文开头的例子中，我们遇到了麻烦，因为 logElements() 修改了其参数 arr：

function logElements(arr) {while (arr.length > 0) {console.log(arr.shift());
  }
}

让我们在此函数中添加防御性复制：

function logElements(arr) {arr = [...arr]; // defensive copy
  while (arr.length > 0) {console.log(arr.shift());
  }
}

现在，如果在 main() 内部调用 logElements() 不会再引发问题：

function main() {const arr = ['banana', 'orange', 'apple'];

  console.log('Before sorting:');
  logElements(arr);

  arr.sort(); // changes arr

  console.log('After sorting:');
  logElements(arr); // (A)
}
main();

// Output:
// 'Before sorting:'
// 'banana'
// 'orange'
// 'apple'
// 'After sorting:'
// 'apple'
// 'banana'
// 'orange'

复制公开的内部数据

让我们从 StringBuilder 类开始，该类不会复制它公开的内部数据（A 行）：

class StringBuilder {constructor() {this._data = [];
  }
  add(str) {this._data.push(str);
  }
  getParts() {
    // We expose internals without copying them:
    return this._data; // (A)
  }
  toString() {return this._data.join('');
  }
}

只要不使用 .getParts()，一切就可以正常工作：

const sb1 = new StringBuilder();
sb1.add('Hello');
sb1.add('world!');
assert.equal(sb1.toString(), 'Hello world!');

但是，如果更改了 .getParts() 的结果（A 行），则 StringBuilder 会停止正常工作：

const sb2 = new StringBuilder();
sb2.add('Hello');
sb2.add('world!');
sb2.getParts().length = 0; // (A)
assert.equal(sb2.toString(), ''); // not OK

解决方案是在内部 ._data 被公开之前防御性地对它进行复制（A 行）：

class StringBuilder {constructor() {this._data = [];
  }
  add(str) {this._data.push(str);
  }
  getParts() {
    // Copy defensively
    return [...this._data]; // (A)
  }
  toString() {return this._data.join('');
  }
}

现在，更改 .getParts() 的结果不再干扰 sb 的操作：

const sb = new StringBuilder();
sb.add('Hello');
sb.add('world!');
sb.getParts().length = 0;
assert.equal(sb.toString(), 'Hello world!'); // OK

通过无损更新来避免数据改变

我们将首先探讨以破坏性方式和非破坏性方式更新数据之间的区别。然后将学习非破坏性更新如何避免数据改变。

背景：破坏性更新与非破坏性更新

我们可以区分两种不同的数据更新方式：

  • 数据的 破坏性更新 使数据被改变，使数据本身具有所需的形式。
  • 数据的 非破坏性更新 创建具有所需格式的数据副本。

后一种方法类似于先复制然后破坏性地更改它，但两者同时进行。

示例：以破坏性和非破坏性的方式更新对象

这就是我们破坏性地设置对象的属性 .city 的方式：

const obj = {city: 'Berlin', country: 'Germany'};
const key = 'city';
obj[key] = 'Munich';
assert.deepEqual(obj, {city: 'Munich', country: 'Germany'});

以下函数以非破坏性的方式更改属性：

function setObjectNonDestructively(obj, key, value) {const updatedObj = {};
  for (const [k, v] of Object.entries(obj)) {updatedObj[k] = (k === key ? value : v);
  }
  return updatedObj;
}

它的用法如下：

const obj = {city: 'Berlin', country: 'Germany'};
const updatedObj = setObjectNonDestructively(obj, 'city', 'Munich');
assert.deepEqual(updatedObj, {city: 'Munich', country: 'Germany'});
assert.deepEqual(obj, {city: 'Berlin', country: 'Germany'});

传播使 setObjectNonDestructively() 更加简洁：

function setObjectNonDestructively(obj, key, value) {return {...obj, [key]: value};
}

注意：setObject NonDestructively() 的两个版本都进行了较浅的更新。

示例：以破坏性和非破坏性的方式更新数组

以下是破坏性地设置数组元素的方式：

const original = ['a', 'b', 'c', 'd', 'e'];
original[2] = 'x';
assert.deepEqual(original, ['a', 'b', 'x', 'd', 'e']);

非破坏性地更新数组要复杂得多。

function setArrayNonDestructively(arr, index, value) {const updatedArr = [];
  for (const [i, v] of arr.entries()) {updatedArr.push(i === index ? value : v);
  }
  return updatedArr;
}

const arr = ['a', 'b', 'c', 'd', 'e'];
const updatedArr = setArrayNonDestructively(arr, 2, 'x');
assert.deepEqual(updatedArr, ['a', 'b', 'x', 'd', 'e']);
assert.deepEqual(arr, ['a', 'b', 'c', 'd', 'e']);

.slice() 和扩展使 setArrayNonDestructively() 更加简洁：

function setArrayNonDestructively(arr, index, value) {
  return [...arr.slice(0, index), value, ...arr.slice(index+1)]
}

注意：setArrayNonDestructively() 的两个版本都进行了较浅的更新。

手动深度更新

到目前为止，我们只是浅层地更新了数据。让我们来解决深度更新。以下代码显示了如何手动执行此操作。我们正在更改 name 和 employer。

const original = {name: 'Jane', work: {employer: 'Acme'}};
const updatedOriginal = {
  ...original,
  name: 'John',
  work: {
    ...original.work,
    employer: 'Spectre'
  },
};

assert.deepEqual(original, {name: 'Jane', work: {employer: 'Acme'}});
assert.deepEqual(updatedOriginal, {name: 'John', work: {employer: 'Spectre'}});

实现通用深度更新

以下函数实现了通用的深度更新。

function deepUpdate(original, keys, value) {if (keys.length === 0) {return value;}
  const currentKey = keys[0];
  if (Array.isArray(original)) {
    return original.map((v, index) => index === currentKey
        ? deepUpdate(v, keys.slice(1), value) // (A)
        : v); // (B)
  } else if (typeof original === 'object' && original !== null) {
    return Object.fromEntries(Object.entries(original).map((keyValuePair) => {const [k,v] = keyValuePair;
          if (k === currentKey) {return [k, deepUpdate(v, keys.slice(1), value)]; // (C)
          } else {return keyValuePair; // (D)
          }
        }));
  } else {
    // Primitive value
    return original;
  }
}

如果我们将 value 视为要更新的树的根，则 deepUpdate() 只会深度更改单个分支（A 和 C 行）。所有其他分支均被浅复制（B 和 D 行）。

以下是使用 deepUpdate() 的样子：

const original = {name: 'Jane', work: {employer: 'Acme'}};

const copy = deepUpdate(original, ['work', 'employer'], 'Spectre');
assert.deepEqual(copy, {name: 'Jane', work: {employer: 'Spectre'}});
assert.deepEqual(original, {name: 'Jane', work: {employer: 'Acme'}});

非破坏性更新如何帮助共享可变状态？

使用非破坏性更新，共享数据将变得毫无问题，因为我们永远不会改变共享数据。（显然，这只有在各方都这样做的情况下才有效。）

有趣的是，复制数据变得非常简单：

const original = {city: 'Berlin', country: 'Germany'};
const copy = original;

仅在必要时以及在我们进行无损更改的情况下，才进行 original 的实际复制。

通过使数据不变来防止数据改变

我们可以通过使共享数据不变来防止共享数据发生改变。接下来，我们将研究 JavaScript 如何支持不变性。之后，讨论不可变数据如何帮助共享可变状态。

背景：JavaScript 中的不变性

JavaScript 具有三个级别的保护对象：

  • Preventing extensions 使得无法向对象添加新属性。但是，你仍然可以删除和更改属性。

    • 方法: Object.preventExtensions(obj)

  • Sealing 可以防止扩展，并使所有属性都无法配置（大约：您无法再更改属性的工作方式）。

    • 方法: Object.seal(obj)

  • Freezing 使对象的所有属性不可写后将其密封。也就是说，对象是不可扩展的，所有属性都是只读的，无法更改它。

    • 方法: Object.freeze(obj)

有关更多信息，请参见“Speaking JavaScript”。

鉴于我们希望对象是完全不变的，因此在本文中仅使用 Object.freeze()。

浅层冻结

Object.freeze(obj) 仅冻结 obj 及其属性。它不会冻结那些属性的值，例如：

const teacher = {
  name: 'Edna Krabappel',
  students: ['Bart'],
};
Object.freeze(teacher);

assert.throws(() => teacher.name = 'Elizabeth Hoover',
  /^TypeError: Cannot assign to read only property 'name'/);

teacher.students.push('Lisa');
assert.deepEqual(
  teacher, {
    name: 'Edna Krabappel',
    students: ['Bart', 'Lisa'],
  });

实现深度冻结

如果要深度冻结，则需要自己实现：

function deepFreeze(value) {if (Array.isArray(value)) {for (const element of value) {deepFreeze(element);
    }
    Object.freeze(value);
  } else if (typeof value === 'object' && value !== null) {for (const v of Object.values(value)) {deepFreeze(v);
    }
    Object.freeze(value);
  } else {// Nothing to do: primitive values are already immutable} 
  return value;
}

回顾上一节中的例子，我们可以检查 deepFreeze() 是否真的冻结了：

const teacher = {
  name: 'Edna Krabappel',
  students: ['Bart'],
};
deepFreeze(teacher);

assert.throws(() => teacher.name = 'Elizabeth Hoover',
  /^TypeError: Cannot assign to read only property 'name'/);

assert.throws(() => teacher.students.push('Lisa'),
  /^TypeError: Cannot add property 1, object is not extensible$/);

不可变包装器（高级）

用不可变的包装器包装可变的集合并提供相同的 API，但没有破坏性的操作。现在对于同一集合，我们有两个接口：一个是可变的，另一个是不可变的。当我们具有要安全的公开内部可变数据时，这很有用。

接下来展示了 Maps 和 Arrays 的包装器。它们都有以下限制：

  • 它们比较简陋。为了使它们适合实际中的使用，需要做更多的工作：更好的检查，支持更多的方法等。
  • 他们是浅拷贝。

map 的不变包装器

类 ImmutableMapWrapper 为 map 生成包装器：

class ImmutableMapWrapper {constructor(map) {this._self = map;}
}

// Only forward non-destructive methods to the wrapped Map:
for (const methodName of ['get', 'has', 'keys', 'size']) {ImmutableMapWrapper.prototype[methodName] = function (...args) {return this._self[methodName](...args);
  }
}

这是 action 中的类：

const map = new Map([[false, 'no'], [true, 'yes']]);
const wrapped = new ImmutableMapWrapper(map);

// Non-destructive operations work as usual:
assert.equal(wrapped.get(true), 'yes');
assert.equal(wrapped.has(false), true);
assert.deepEqual([...wrapped.keys()], [false, true]);

// Destructive operations are not available:
assert.throws(() => wrapped.set(false, 'never!'),
  /^TypeError: wrapped.set is not a function$/);
assert.throws(() => wrapped.clear(),
  /^TypeError: wrapped.clear is not a function$/);

数组的不可变包装器

对于数组 arr，常规包装是不够的，因为我们不仅需要拦截方法调用，而且还需要拦截诸如 arr [1] = true 之类的属性访问。JavaScript proxies 使我们能够执行这种操作：

const RE_INDEX_PROP_KEY = /^[0-9]+$/;
const ALLOWED_PROPERTIES = new Set(['length', 'constructor', 'slice', 'concat']);

function wrapArrayImmutably(arr) {
  const handler = {get(target, propKey, receiver) {// We assume that propKey is a string (not a symbol)
      if (RE_INDEX_PROP_KEY.test(propKey) // simplified check!
        || ALLOWED_PROPERTIES.has(propKey)) {return Reflect.get(target, propKey, receiver);
      }
      throw new TypeError(`Property "${propKey}" can’t be accessed`);
    },
    set(target, propKey, value, receiver) {throw new TypeError('Setting is not allowed');
    },
    deleteProperty(target, propKey) {throw new TypeError('Deleting is not allowed');
    },
  };
  return new Proxy(arr, handler);
}

让我们包装一个数组：

const arr = ['a', 'b', 'c'];
const wrapped = wrapArrayImmutably(arr);

// Non-destructive operations are allowed:
assert.deepEqual(wrapped.slice(1), ['b', 'c']);
assert.equal(wrapped[1], 'b');

// Destructive operations are not allowed:
assert.throws(() => wrapped[1] = 'x',
  /^TypeError: Setting is not allowed$/);
assert.throws(() => wrapped.shift(),
  /^TypeError: Property "shift" can’t be accessed$/);

不变性如何帮助共享可变状态？

如果数据是不可变的，则可以共享数据而没有任何风险。特别是无需防御性复制。

非破坏性更新是对不变数据的补充，使其与可变数据一样通用，但没有相关风险。

用于避免共享可变状态的库

有几种可用于 JavaScript 的库，它们支持对不可变数据进行无损更新。其中流行的两种是：

  • Immutable.js 提供了不变（版本）的数据结构，例如 List，Map，Set 和 Stack。
  • Immer 还支持不可变性和非破坏性更新，但仅适用于普通对象和数组。

Immutable.js

在其存储库中，Immutable.js 的描述为：

用于 JavaScript 的不可变的持久数据集，可提高效率和简便性。

Immutable.js 提供了不可变的数据结构，例如：

  • List
  • Map（不同于 JavaScript 的内置Map）
  • Set（不同于 JavaScript 的内置 Set）
  • Stack
  • 等

在以下示例中，我们使用不可变的 Map：

import {Map} from 'immutable/dist/immutable.es.js';
const map0 = Map([[false, 'no'],
  [true, 'yes'],
]);

const map1 = map0.set(true, 'maybe'); // (A)
assert.ok(map1 !== map0); // (B)
assert.equal(map1.equals(map0), false);

const map2 = map1.set(true, 'yes'); // (C)
assert.ok(map2 !== map1);
assert.ok(map2 !== map0);
assert.equal(map2.equals(map0), true); // (D)

说明：

  • 在 A 行中，我们新创建了一个 map0 的不同版本 map1，其中 true 映射到了 'maybe'。
  • 在 B 行中，我们检查更改是否为非破坏性的。
  • 在 C 行中，我们更新 map1，并撤消在 A 行中所做的更改。
  • 在 D 行中，我们使用 Immutable 的内置 .equals() 方法来检查是否确实撤消了更改。

Immer

在其存储库中，Immer 库 的描述为：

通过更改当前状态来创建下一个不可变状态。

Immer 有助于非破坏性地更新（可能嵌套）普通对象和数组。也就是说，不涉及特殊的数据结构。

这是使用 Immer 的样子：

import {produce} from 'immer/dist/immer.module.js';

const people = [{name: 'Jane', work: {employer: 'Acme'}},
];

const modifiedPeople = produce(people, (draft) => {draft[0].work.employer = 'Cyberdyne';
  draft.push({name: 'John', work: {employer: 'Spectre'}});
});

assert.deepEqual(modifiedPeople, [{name: 'Jane', work: {employer: 'Cyberdyne'}},
  {name: 'John', work: {employer: 'Spectre'}},
]);
assert.deepEqual(people, [{name: 'Jane', work: {employer: 'Acme'}},
]);

原始数据存储在 people 中。produce() 为我们提供了一个变量 draft。我们假设这个变量是 people，并使用通常会进行破坏性更改的操作。Immer 拦截了这些操作。代替变异draft，它无损地改变 people。结果由 modifiedPeople 引用。它是一成不变的。

致谢

  • Ron Korvig 提醒我在 JavaScript 中进行深拷贝时使用静态工厂方法，而不要重载构造函数。

扩展阅读

  • 传播：

    • “写给不耐烦的程序员的 JavaScript”中的扩展为对象字面量”一节
    • “写给不耐烦的程序员的 JavaScript”中的扩展为数组字面量”一节

  • Property attributes:

    • Speaking JavaScript 中的“Property Attributes and Property Descriptors”部分
    • Speaking JavaScript 中的 Protecting Objects 一节

  • 原型链：

    • “写给不耐烦的程序员的 JavaScript”中的“原型链”一节
    • Speaking JavaScript 中的“Properties: Definition Versus Assignment”部分
  • “Speaking JavaScript”中的“使用 JavaScript 进行元编程”一节

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

  • 深入理解 Shadow DOM v1
  • 一步步教你用 WebVR 实现虚拟现实游戏
  • 13 个帮你提高开发效率的现代 CSS 框架
  • 快速上手 BootstrapVue
  • JavaScript 引擎是如何工作的？从调用栈到 Promise 你需要知道的一切
  • WebSocket 实战：在 Node 和 React 之间进行实时通信
  • 关于 Git 的 20 个面试题
  • 深入解析 Node.js 的 console.log
  • Node.js 究竟是什么？
  • 30 分钟用 Node.js 构建一个 API 服务器
  • Javascript 的对象拷贝
  • 程序员 30 岁前月薪达不到 30K，该何去何从
  • 14 个最好的 JavaScript 数据可视化库
  • 8 个给前端的顶级 VS Code 扩展插件
  • Node.js 多线程完全指南
  • 把 HTML 转成 PDF 的 4 个方案及实现
  • 更多文章 …
退出移动版