Object构造函数的方法 之 Object.freeze

更新日期: 2020-02-26阅读: 1.5k标签: Object

Object.freeze( obj )可以 冻结 一个对象。一个被冻结的对象再也不能被修改;

冻结了一个对象则不能向这个对象添加新的属性,不能删除已经属性, 不能修改该对象已有属性的可枚举性、可配置性、可写性、以及不能修改已有属性的值。

此外,冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数是相同的对象。

 
JavaScript Demo: 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 }
     ]);
  }
})


链接: https://www.fly63.com/article/detial/9201

Js中Object对象的理解,Object常用的属性和方法有哪些?

在JavaScript中的所有对象都是继承Object对象而来的, 我们可以理解为Object是所有js对象通用的功能,讲解Object的prototype属性、Object.prototype属性和方法?Object.prototype.constructor属性等

Object.create()的使用总汇:创建对象,参数说明,兼容性的实现

JavaScript中Object.create()的含义和语法,使用它创建null原型的对象 ,创建一个普通的空对象,Object.create()第二个参数说明。

Javascript中的object相等

相等是JavaScript中起初最让人困惑的部分。==和===的比较、强制类型的顺序等等,都使得这个问题变得复杂。今天,我们会聚焦另一个方面:object相等是如何实现的。

js 中 Object.defineProperty 的用法

还能通过 Object.defineProperty() 方法,添加或修改对象的属性。更重要的是,除了目标对象 obj,属性名称 prop 外,方法能传入属性描述符 descriptor,以实现更复杂的性质。属性描述符是一个对象,有两种形式:一种是数据描述符,另一种是存取描述符。

理解js中Object的defineProperty()和defineProperties()

Object的defineProperty和defineProperties这两个方法在js中的重要性十分重要,主要功能就是用来定义或修改这些内部属性,与之相对应的getOwnPropertyDescriptor和getOwnPropertyDescriptors就是获取这行内部属性的描述。

js中的Object.defineProperty()和defineProperties()

Object.defineProperty()该方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象,Object.defineProperties()该方法直接在一个对象上定义新的属性或修改现有属性,并返回该对象

Object.keys方法

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。

Js中Object.freeze()方法

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。

Js Object.freeze和Object.seal

本文实例讲述了JS Object.preventExtensions(),Object.seal()与Object.freeze()用法。分享给大家供大家参考,Object.preventExtensions 只能阻止一个对象不能再添加新的自身属性,仍然可以为该对象的原型添加属性。

Object.assign实现浅拷贝的原理

什么是浅拷贝?浅拷贝就是创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。浅拷贝Object.assign()是什么?主要将所有可枚举属性的值从一个或者多个数据源对象复制到目标对象,同时返回目标对象。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!