在JavaScript中真正保护（类/IIFE变量的）数据成员

上下文

我的任务是修复菜单编辑页面上的一个大错误，这是由过时的元素问题引起的，是由服务器端呈现的HTML元素引起的。在我与这个bug的三天斗争中，我从Angular得到了一些灵感，并决定尝试创建一个菜单状态，该状态将为页面上的所有内容提供动力（添加/删除类别/项目，然后，为添加的模块分页）

一些代码

我想出了这个iLife（作为MVC的“控制器”。选择器模式点击这个的add方法，删除按钮点击这个的remove方法。此外，它被传递到模板呈现函数，这是当模式弹出时第一个点击的东西）：

好的，那有什么问题吗？

问题是，这似乎是一种虚假的安全感。当我试图单独测试这个结构时，它失败了

我用

\u类别

中的三个实体测试它，所有这些实体都是

附加的

，导致

menuState.getAllCategories().length

返回3和

menuState.getAvailableCategories().length

返回0。好消息是当我尝试

menuState.getAllCategories().push('a')
menuState.getAllCategories().length

我还有三个

然而，当我走的时候

menuState.getAvailableCategories().push('b')
menuState.getAvailableCategories().length

我得到1，而不是0

真的有办法锁定这里的其他人吗？！如果没有，我的替代方案是什么？

我用它修复了它，我已经用它重构了我之前的开发人员在这个项目上工作时编写的“枚举”。它所做的是完全保护状态不受任何类型的更改的影响，包括：

• 添加属性
• 删除属性
• 修改属性
• 重新分配正在“冻结”的对象/数组

我如何使用它

在helper方法中，我执行了以下操作：

  attached : function() { return Object.freeze(obj.attached) },
  available : function() { return Object.freeze(obj.available) },

---

这可以防止从这些方法更改阵列，从而关闭这种类型的XSS。而且，

menuState

是用

const

声明的

注意：在任何人提出之前，在公开的

getXxx

方法上使用

get

ters是行不通的。这也是花了这么长时间的部分原因，因为它们不起作用，我花了太多的时间和精力试图让它起作用。“当我试图单独使用XSS测试这个结构时，它失败了。”-在你的网站上使用可变数组与XSS有什么关系？只需使用

function（）{return obj….slice（）；}

在返回数组之前制作数组的副本。您不应该每次调用getter时都调用

Object.freeze

。您应该冻结对象一次，然后将其公开（作为getter的属性）。

  attached : function() { return Object.freeze(obj.attached) },
  available : function() { return Object.freeze(obj.available) },