如何在不改變原始版本的情況下創建 object 的深度凍結版本？

Question

假設我們有以下 object：

"use strict"; // To trigger errors on frozen objects mutation attempts

const myObj = {
  rootProp1: {
    leafProp1: "hello",
    leafProp2: "world",
  rootProp2: "!",
};

當使用“經典” Object.freeze方法時，我們只凍結 object 的根屬性：

const frozen = Object.freeze(myObj);

frozen.rootProp2 = "?"; // error --> OK
delete frozen.rootProp1; // error --> OK
frozen.extraRootProp = "how are you?"; // error --> OK
frozen.rootProp1.leafProp1 = "hi"; // NO ERROR --> I don't want this

為了深度凍結 object，我們可以使用如下方法：

const deepFrozen = deepFreeze(myObj);

deepFrozen.rootProp1.leafProp1 = "hi"; // error --> OK
myObj.rootProp2 = "?"; // ERROR --> I don't want this

但這對我來說仍然是一個問題：我想要一個 function 可以返回 object 的凍結版本，而不凍結原始版本（我正在嘗試學習函數式編程，所以我想要盡可能少的突變）。 怎么做？

Answer 1

在 ECMAScript 2018 (ES9) 中，由於展開運算符，可以使用這個簡單的 function：

const deepFreeze = (obj) => typeof obj === "object"
    ? Object.freeze({
        ...Object.entries(obj).reduce(
          (prev, [key, value]) => ({
            ...prev,
            [key]: value ? deepFreeze(value) : value,
          }),
          {}
        ),
      })
    : typeof obj === "function" ? Object.freeze(obj) : obj;