创建任何对象(包括深层属性)的只读/不可变副本

Create a read-only/immutable copy of any object (including deep properties)

本文关键字：只读 不可变 副本 属性 对象 任何 包括深 创建      更新时间：2023-09-26

如何在JavaScript中创建对象的只读/不可变版本，其属性不能更改?这也应该适用于任何子对象的属性，等等。

我遇到的所有方法(Object.defineProperty, Object.freeze等)都只适用于对象的顶层属性，而不适用于子对象。

(一个可能的用例:在特定模块中创建/修改settings或configuration类型对象后，您需要以不可变的形式将其公开给程序的其余模块。)

这是我经过深思熟虑后想出的解决方案。很适合我的需要，所以我想分享一下QnA风格。如果你发现了任何改进/问题，请提出建议。

/**
 * Make the the specified object (deeply) immutable or "read-only", so that none of its
 * properties (or sub-properties) can be modified. The converted object is returned.
 * @param {object} obj Input object
 */
makeImmutable: function makeImmutable (obj) {
    if ((typeof obj === "object" && obj !== null) ||
        (Array.isArray? Array.isArray(obj): obj instanceof Array) ||
        (typeof obj === "function")) {
        Object.freeze(obj);
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {
                makeImmutable(obj[key]);
            }
        }
    }
    return obj;
}

编辑:简化代码。

对这个解决方案很感兴趣。

下面是一个示例代码片段:

/**
 * Make the the specified object (deeply) immutable or "read-only", so that none of its
 * properties (or sub-properties) can be modified. The converted object is returned.
 * @param {object} obj Input object
 */
makeImmutable: function makeImmutable(obj) {
  if ((typeof obj === "object" && obj !== null) ||
    (Array.isArray ? Array.isArray(obj) : obj instanceof Array) ||
    (typeof obj === "function")) {
    Object.freeze(obj);
    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        makeImmutable(obj[key]);
      }
    }
  }
  return obj;
}
var newObj = {
  thisArrayOfObjects: [{
    propertyOne: 'value1',
    propertyTwo: 'value2'
  }]
};
newObj.thisArrayOfObjects.push({
  propertyBefore: 'before3'
});
console.log('newObj', newObj);
$('#viewer').append('newObj: ' + JSON.stringify(newObj));
makeImmutable(newObj);
console.log('imutable', newObj);
$('#viewer').append('<br/><br/>imutable: ' + JSON.stringify(newObj));
try {
  newObj.thisArrayOfObjects.push({
    propertyThree: 'value3'
  });
} catch (e) {
  $('#viewer').append('<br/><br/>immutable error: ' + e.message);
  console.log('immutable error:', e.message);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="viewer" />

已经是很棒的答案了。这个是用lodash:

var _ = require('lodash');

使对象不可变:

/**
 * Makes an Object immutable by (deep) freezing all own peoperties.
 * @param {*} obj - Object to make immutable.
 * @returns {*} The input Object.
 */
function deepFreeze(obj) {
    if (_.isObject(obj) || _.isArray(obj) || _.isFunction(obj)) {
        Object.freeze(obj);
        _.forOwn(obj, deepFreeze);
    }
    return obj;
}

创建不可变克隆:

var frozenClone = deepFreeze(_.cloneDeep(obj));
相关文章：