JS Object构造函数之Object.freeze


Posted in Javascript onApril 28, 2021

概述

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的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jquery事件与函数的使用介绍
Sep 29 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
原生js实现回复评论功能
Jan 18 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
关于vue中如何监听数组变化
vue实现简单数据双向绑定
Apr 28 #Vue.js
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 #Javascript
vue引入Excel表格插件的方法
Apr 28 #Vue.js
react如何快速设置文件路径别名
原生JS封装vue Tab切换效果
vue项目两种方式实现竖向表格的思路分析
You might like
由php的call_user_func传reference引发的思考
2010/07/23 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
Javascript中的数学函数
2007/04/04 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
python处理Excel xlrd的简单使用
2017/09/12 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
Python偏函数实现原理及应用
2020/11/20 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
简历里的自我评价
2014/01/31 职场文书
节能减排倡议书
2014/04/15 职场文书
班主任个人工作反思
2014/04/28 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
校长师德表现自我评价
2015/03/04 职场文书
2015年仓库工作总结
2015/04/09 职场文书
小学运动会加油词
2015/07/18 职场文书
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS