如何实现JS对象冻结的Object.freeze方法？

本文共计901个文字，预计阅读时间需要4分钟。

目录+概述+示例+1) 冻结对象+2) 冻结数组+3) 浅冻结+4) 深冻结+存在的意义+概述+Object.freeze(obj)可以冻结一个对象。一个被冻结的对象不能再被修改；冻结了的对象不能添加新属性。

目录

• 概述
• 示例
• 1) 冻结对象
• 2) 冻结数组
• 3) 浅冻结
• 4) 深冻结
• 存在的意义

概述

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，并且确定数据不会改变，使用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构造函数之Object.freeze的详细内容，更多关于JS Object.freeze的资料请关注自由互联其它相关文章！