javascript - 在浏览器中编程 javascript 时限制副作用

Question

在浏览器中使用 javascript 编程时限制副作用非常棘手。

我可以做一些事情，比如不访问成员变量，就像这个愚蠢的例子一样:

let number = 0;

const inc = (n) => {
  number = number + n;

  return number;
};

console.log(inc(1));  //=> 1
console.log(inc(1));  //=> 2

但是我还能做些什么来减少 javascript 中的副作用？

Answer 1

当然，您可以通过仔细编程来避免副作用。我假设您的问题是关于如何预防它们。您这样做的能力受到语言性质的严重限制。以下是一些方法:

1. 使用网络 worker 。参见 MDN . Web workers 在不同于当前窗口的另一个全局上下文中运行。:

2. 在 iframe 中隔离某些类型的逻辑。使用 cross-window messaging与 iframe 通信。

3. 不变性库。参见 https://github.com/facebook/immutable-js .还有 http://bahmutov.calepin.co/avoid-side-effects-with-immutable-data-structures.html .

4. 用Object.freeze锁定你的对象 , Object.seal , 或 Object.preventExtensions .同样，使用带有 getter 但没有 setter 的 Object.defineProperty 在对象上创建只读属性，或者将 writeable 属性设置为 false.

5. 使用 Object.observe 获取有关对象及其属性的各种类型更改的异步报告，您可以根据这些报告抛出错误或采取其他操作。

6. 如果可用，请使用 Proxy 以完全控制对对象的访问。

有关阻止访问 window 的注意事项，请参阅 javascript sandbox a module to prevent reference to Window .还有 http://dean.edwards.name/weblog/2006/11/sandbox/ .最后，Semi-sandboxing Javascript eval .

区分内向副作用和外向副作用很有用。内部副作用是一些其他代码侵入我的组件状态的地方。外部副作用是我的代码侵入了其他一些组件的状态。可以通过其他答案中提到的 IIFE 或 ES6 模块来防止内部副作用。但更严重的问题是外部副作用，这将需要上述方法之一。