JS Object构造函数之Object.freeze

发布时间:2022-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JS Object构造函数之Object.freeze脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

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的资料请关注脚本宝典其它相关文章

脚本宝典总结

以上是脚本宝典为你收集整理的JS Object构造函数之Object.freeze全部内容,希望文章能够帮你解决JS Object构造函数之Object.freeze所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:Object