JS Object构造函数之Object.freeze

2024-11-30 16:24:56

概述

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.keys()方法的使用示例

本文实例讲述了JS数组Object.keys()方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Object.keys()方法</title> </head> <body> <script type="
JS中比较两个Object数组是否相等方法实例

一.问题在js中是不能直接用"=="或者"==="来计算两个数组是否相等的,那么就需要对数组的值进行比较: 二.次解决方案对于比较两个数组次要的方法有如下几种,为什么说是次要解决方案呢?因为它不能真正称之为对两个数组的对比. 1. 把两个数组转化为字符串的形式比较,如下: a. 当两个数组元素类型相同,顺序相同时,直接判断是否相等,结果不相等:转化为字符串后,结果相等: var a=[1, 2, 3, 4]; var b = a.slice(); console
详解如何在Javascript中使用Object.freeze()

Object.freeze() Object.freeze() 方法可以冻结一个对象.一个被冻结的对象再也不能被修改:冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性.可配置性.可写性,以及不能修改已有属性的值.此外,冻结一个对象后该对象的原型也不能被修改.freeze() 返回和传入的参数相同的对象用法 const objectExample = { prop1: 20, prop2: "羊先生" }; // 默认情况下,我们可以根据需
vue.js的双向数据绑定Object.defineProperty方法的神奇之处

vue.js 2.0版的双向数据绑定就是通过Object.defineProperty方法实现的,俗称属性拦截器. 这么说吧,vue.js是通过它实现双向绑定的.俗称属性拦截器.而且专门用来监控对象属性变化的Object.observe方法也被草案发起人撤回了(此方法在node环境中仍能使用).可见defineProperty的威力之大. Object.defineProperty() 不支持ie8 方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. //
实例分析JS中的相等性判断===、 ==和Object.is()

相信刚接触JS的人都会被他的想等性判断给整糊涂,看看下面代码,你能答对几个? NaN === NaN // false NaN == NaN // false Object.is(NaN, NaN) // true 0 == false // true 1 == true // true Number(null) === 0 // true null == 0 // false Javascript提供了三种不同的值比较操作,分别是严格相等.宽松相等.以及Object.is,希望看完下面的内容,
JavaScript对象拷贝与Object.assign用法实例分析

本文实例讲述了JavaScript对象拷贝与Object.assign用法.分享给大家供大家参考,具体如下: 深拷贝与浅拷贝在 JavaScript 中,对于基本数据类型(undefined.null.boolean.number.string)来说,在变量中存储的就是这个变量本身的值,复制是对值的复制,不存在深浅之说.但C系语言的共同特点中有,存储引用类型(对象),实际中在变量里存的是它的地址.因此对 JavaScript 中的复杂数据类型(object)来说,也会有浅拷贝和深拷贝的概念:浅
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析

本文实例讲述了JS Object.preventExtensions(),Object.seal()与Object.freeze()用法.分享给大家供大家参考,具体如下: 一.基本介绍 Method Description Param Detail Object.preventExtensions() 让一个对象变的不可扩展,也就是永远不能再添加新的属性 Object 详细 Object.isExtensible() 判断一个对象是否是可扩展 Object 详细 Object.seal() 让一
JS解惑之Object中的key是有序的么

当我们使用for/in遍历一个Object对象的时候,打印的结果是否按key的顺序打印出来呢? 答案是:不一定. 背景最近在做一个项目的时候,遇到这样一个需求: 一个下拉列表中有3个固定选项,包括:-1:全部:0:正常:1:失效. 于是,我就定义了一个对象,然后循环这个对象,把结果放到 <option> 上面: var obj = { '-1': '全部', '0' : '正常', '1' : '失效' };  <select> <
Javascript 对象（object）合并操作实例分析

本文实例讲述了Javascript 对象(object)合并操作.分享给大家供大家参考,具体如下: 对象的合并需求:设有对象 o1 ,o2,需要得到对象 o3 var o1 = { a:'a' }, o2 = { b:'b' }; // 则 var o3 = { a:'a', b:'b' } 方法1:使用JQuery的extend方法 **方法定义**:jQuery.extend([deep], target, object1, [objectN]) > 用一个或多个其他对象来扩展一个对象,返
JS Object构造函数之Object.freeze

概述 Object.freeze(obj)可以冻结一个对象.一个被冻结的对象再也不能被修改: 冻结了一个对象则不能向这个对象添加新的属性,不能删除已经属性,不能修改该对象已有属性的可枚举性.可配置性.可写性.以及不能修改已有属性的值. 此外,冻结一个对象后该对象的原型也不能被修改.freeze()返回和传入的参数是相同的对象. JavaScriptDemo: Object.freeze() const obj = { prop:42 } Object.freeze(obj) obj.prop =
js中关于new Object时传参的一些细节分析

1, 参数是一个对象,核心js对象(native ECMAScript object)或宿主对象(host object),那么将直接返回该对象. 其生成的对象构造器仍然是所传参数对象的构造器.这样造成的后果是虽然该对象是new Object,但其constructor不一定是Object. 复制代码代码如下: function Person(){this.name='jack';} var w = new Object(window), d = new Object(document), p
判断js的Array和Object的实现方法

var a = ['hello','world']; console.log(typeof a); // object console.log(a.toString()); // hello,word 字符串 console.log(Object.prototype.toString.call(a)); //[object Array] var b = {'hello':'world'}; console.log(typeof b); // object console.log(b.toStri
Js中安全获取Object深层对象的方法实例

目录前言正文参数例子 lodash的实现: tokey函数: castPath函数: stringToPath函数: memoizeCapped函数: memoize函数: 完整代码如下: 参考资料: 总结前言做前端的小伙伴一定遇到过后端返回的数据有多层嵌套的情况,当我要获取深层对象的值时为防止出错,会做层层非空校验,比如: const obj = { goods: { name: 'a', tags: { name: '快速',
JS基于构造函数实现的菜单滑动显隐效果【测试可用】

本文实例讲述了JS基于构造函数实现的菜单滑动显隐效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x
深入浅析JS Function()构造函数

js中function对象是一个令人着迷的东西,但由于他太过于灵活,常常令人迷惑. 先给大家看个代码片段. var scope="global"; function constructFunction(){ var scope="local"; return new Function(" return scope"); } constructFunction()(); function constructFunction2(){ var scop
Object.wait()与Object.notify()的用法详细解析

wait.notify和notifyAll方法是Object类的final native方法.所以这些方法不能被子类重写,Object类是所有类的超类,因此在程序中有以下三种形式调用wait等方法. 复制代码代码如下: wait();//方式1:this.wait();//方式2:super.wait();//方式3 void notifyAll()解除所有那些在该对象上调用wait方法的线程的阻塞状态.该方法只能在同步方法或同步块内部调用.如果当前线程不是锁的持有者,该方法抛出一个Illeg
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解

大部分情况下Object.getOwnPropertyNames()与Object.keys(obj)的功能是一样的,我们一般也是用来获取一个JSON对象中所有属性,例如 const obj = { property1: 1, property2: 2, }; console.log(Object.keys(obj)); console.log(Object.getOwnPropertyNames(obj)); 输出: > Array ["property1", "pr