本文详细介绍 JavaScript 中 Object.freeze() 方法的使用。该方法用于冻结对象，使其属性不可修改、删除或配置，并防止原型被更改。文章通过示例演示了浅冻结的局限性，即嵌套对象仍可变，并提供了递归深冻结的实现方案。此外，还探讨了在大型数组或对象数据不变时使用 freeze 提升性能的技巧，以及在 Vue 等框架中处理冻结数据的注意事项。
概述
Object.freeze(obj) 方法用于冻结一个对象。一旦对象被冻结，它将无法再进行任何修改操作。
对于已冻结的对象，禁止添加新属性，禁止删除现有属性，且无法修改已有属性的可枚举性、可配置性、可写性以及属性值。
此外，冻结对象后，其原型链也无法被修改。freeze() 方法返回与传入参数相同的对象引用。
JavaScriptDemo: Object.freeze()
const obj = {
prop：42
}
Object.freeze(obj)
obj.prop = 33 // 严格模式下会抛出错误。
console.log(obj.prop) // 42示例
1) 冻结对象
var obj = {
prop: function() {},
foo:'bar'
}
// 作为参数传递的对象与返回的对象都被冻结
// 所以不必保存返回的对象 (因为两个对象全等)
var o = Object.freeze(obj)
o === obj // true
// 现在开始任何改变都将失效
obj.foo = ‘he' //不做任何事
Obj.hxx = 'he' // 不添加此属性
// 试图通过Object.defineProperty 更改属性
// 下面两个语句都会抛出异常
Object.defineProperty(obj,'foo',{value:'yy'})
Object.defineProperty(obj,'sex',{value:'女'})
// 也不能更改原型
// 下面两个语句都会抛出异常
Object.setPrototypeOf(obj,{x:20})
Obj.__prorp__ = {x:20}2) 冻结数组
let a = [0]
Object.freeze(a) // 现在数组不能被更改了
a[0] = 1 // 失败
a.push(2) // 失败被冻结的对象通常被视为不可变的，但并非总是如此。以下示例展示了冻结对象并非常量对象（即浅冻结）的情况。
3) 浅冻结
let obj = {
internal: {}
}
Object.freeze(obj)
obj.internal.a = ‘he'
console.log(obj.internal.a) // he若需确保对象完全不可变，必须递归冻结所有类型为对象的属性（即深冻结）。
4) 深冻结
deepFreeze = (obj) => {
var propNames = Object.getOwnPropertyNames(obj);
propNames.forEach(function (name) {
var prop = obj[name];
if (typeof prop == 'object' && prop !== null) {
deepFreeze(prop);
}
});
Object.freeze(obj);
}
deepFreeze1 = (obj) => {
var prop, propName
Object.freeze(obj)
for (propName in obj) {
prop = obj[propName]
if (!obj.hasOwnProperty(propName) || !(typeof prop === "object") || Object.isFrozen(prop)) {
// 跳过原型链上的属性和已冻结的对象.
continue
}
deepFreeze1(prop)
}
}深冻结通常用于处理那些初始为空或不存在，但后续需要设置初始值的属性场景。
title: "楼层销售",
value: "",
options: [],存在的意义
如果拥有一个巨大的数组或对象，且确定数据不会改变，使用 Object.freeze() 可以显著提升性能。需要注意的是，Object.freeze() 冻结的是值本身，你仍然可以替换变量的引用。
new vue({
data: {
// vue不会对list里的object做getter、setter绑定
list: Object.freeze([
{ value: 1 },
{ value: 2 }
])
},
mounted () {
// 界面不会有响应
this.list[0].value = 100;
// 下面两种做法，界面都会响应
this.list = [
{ value: 100 },
{ value: 200 }
];
this.list = Object.freeze([
{ value: 100 },
{ value: 200 }
]);
}
})以上就是 JS Object.freeze() 的详细内容，更多关于 JS Object.freeze 的资料请关注本站其它相关文章！