冻结window下的变量

最新推荐文章于 2023-08-10 23:36:56 发布

62921

最新推荐文章于 2023-08-10 23:36:56 发布

阅读量384

点赞数

分类专栏：项目文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_40409571/article/details/109811054

版权

项目专栏收录该内容

8 篇文章

订阅专栏

本文探讨了如何防止全局变量在JavaScript中被覆写，尤其是挂载在window下的重要数据。通过分析，发现TypeScript的readonly关键字并不能阻止属性在其他地方被修改。然后，文章介绍了`Object.freeze()`方法，它可以冻结对象，使其不可变，但无法阻止全局变量被完全重写。为了解决这个问题，提出了结合`Object.defineProperty`来设置变量的configurable和writable为false，实现全局变量的完全只读状态，以提高代码安全性和稳定性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：有时候我们会把很多重要的数据（如用户信息，权限相关信息）直接挂载在window下的，之前就碰到过因为将全局变量赋值给别的变量，导致该全局变量在代码中被多次覆写，同时在页面中也出现了一些不可预知的错误。因为这种错误有时候很难被发现，而且挂载在window在的变量会暴露在浏览器的控制台中，可能会给项目埋下一些安全隐患。因此就有了下面这篇文章。

目的：让某些全局变量完全只读而不可以被覆写。

1.TypeScript readonly

TypeScript 类型系统允许你在一个接口里使用 readonly 来标记属性。顾名思义，在 TypeScript 中它可以把一个属性变成只读的。

但是readonly 只能确保在直接赋值时不能修改属性，但是当你把这个属性交给其他并没有这种保证的使用者（允许出于类型兼容性的原因），他们能改变它。

同时在浏览器的控制台中也能够对readonly属性进行操作。综上所述，该方案不可行。

2.Object.freeze()

我们看看MDN上该方法的定义：

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

看上去该方法能够满足我们的需求，而且为了使整个对象不可变，MDN上还提供了递归冻结每个类型为对象的属性的方法（深冻结）。

只要将各个全局进行深冻结，问题似乎就能够被解决。但上面所做的只能避免全局变量内的属性不被更改，但无法避免全局变量被完全重写。因此，我们还需要通过通过 Object.defineProperty 来设置全部变量的 configurable 和 writable 为 false。最终可得到让全局变量完全只读，不可以被修改的方法：