从函数返回不可变数组/对象-JavaScript

Question

可能存在这样的问题，但我只是想问一下。 也许对某人会有帮助。

我有以下代码：

window.WML.namespace('Cards', {}, (function (wml) {
 'use strict';

  var layout = {
    '4': [
      [
        {x: X_POS_3, y: Y_POS_1}, {x: X_POS_4, y: Y_POS_1},
        {x: X_POS_5, y: Y_POS_2}, {x: X_POS_6, y: Y_POS_2}
      ],
      [
        {x: X_POS_1, y: Y_POS_1}, {x: X_POS_2, y: Y_POS_1},
        {x: X_POS_4, y: Y_POS_2}, {x: X_POS_5, y: Y_POS_2}
      ],
      [
        {x: X_POS_2, y: Y_POS_1}, {x: X_POS_5, y: Y_POS_1},
        {x: X_POS_4, y: Y_POS_2}, {x: X_POS_5, y: Y_POS_2}
      ]
    ],
    '5': [
      // similar code
    ]
  };

  return {
    cardLayout: function () {
      return layout;
    }
  };
}(window.WML)));

我可以在Firebug中轻松地做到这一点：

var myLayout = WML.Cards.cardLayout();
myLayout['4'] = 34;

console.log(WML.Cards.cardLayout()); // prints {'4': 34, '5': []}

注意：

namespace(ObjectName, inheritObject, newObjectProperties);

在WML内部创建一个称为ObjectName的子对象，该子对象继承自InheritObject的属性以及newObjectProperties的属性/方法。

如果我知道有Array.prototype.slice（）方法创建调用方数组的浅表副本，那么如何使cardLayout（）返回具有不可变子数组的对象？

Answer 1

您可以使用setters / getters防止意外写入应为不可变的对象：

var o = (function() {
    var internal_o = {x:3};
    var internal_y = 5;
    Object.defineProperty(o, "y", {
        get: function(){ return internal_y },
        set: function(){ /*do nothing*/ },
    }
    return internal_o;
})();
o.y = 3; // Does nothing
console.log(o.y) // 5

我们将数据存储在一个闭包中，因此不可能直接访问它。 但是，您必须（递归地）对每个想要不可变的属性执行此操作-您可能希望对代码进行泛化，以便可以调用defineImmutableProperty(obj, "propertyName", value)类的函数。 在您的示例中，如果将'4'属性设置为不可变，则仍然可以更改数组的元素或这些点的x和y属性。

如果要使数组不可变，则可以执行以下操作：

var o = (function() {
    var internal_o = {x:3};
    var internal_array = [1, 2, 3];
    Object.defineProperty(o, "numbers", {
        get: function(){ return internal_array.slice() },
        set: function(){ /*do nothing*/ },
    }
    return internal_o;
})();
o.numbers; // [1, 2, 3], copied from the internal array
o.numbers[1] = "changed"; // Sets a value of the internal array
console.log(o.numbers[1]); // still 2
var numbers = o.numbers;
numbers[1] = "changed";
console.log(numbers[1]); // Since we are still working with the copy, this *will* have mutated

所有这些都带来了性能成本以及许多其他代码。 所以，你应该问问自己，它确实是多么重要的数据是准不变！ （如果有人愿意，运行firebug或类似工具的人肯定可以覆盖这些技术，因为它可以完全访问浏览器的所有功能。）

Answer 2

此递归函数解决了该问题，但移动API不支持它。 因此，如果有人计划制作其应用程序的移动版本，则Object.defineProperty（）可在所有平台上运行。

function deepFreeze(o) {
  var prop, propKey;
  Object.freeze(o); // First freeze the object.
  for (propKey in o) {
    prop = o[propKey];
    if (!o.hasOwnProperty(propKey) || !(typeof prop === 'object') || Object.isFrozen(prop)) {
      // If the object is on the prototype, not an object, or is already frozen,
      // skip it. Note that this might leave an unfrozen reference somewhere in the
      // object if there is an already frozen object containing an unfrozen object.
      continue;
    }

    deepFreeze(prop); // Recursively call deepFreeze.
  }
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze