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 相关文章推荐
Javascript 个人笔记(没有整理,很乱)
Jul 07 Javascript
jQuery html()等方法介绍
Nov 18 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 Javascript
JavaScript实现动态生成表格
Aug 02 Javascript
Vue自定义表单内容检查rules实例
Oct 30 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
关于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
网站当前的在线人数
2006/10/09 PHP
PHP学习之PHP表达式
2006/10/09 PHP
一个简单的PHP入门源程序
2006/10/09 PHP
php 图像函数大举例(非原创)
2009/06/20 PHP
Smarty保留变量用法分析
2016/05/23 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
理解Javascript_03_javascript全局观
2010/10/11 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
医院办公室主任职责
2013/12/29 职场文书
快餐店的创业计划书范文
2014/01/29 职场文书
安卓程序员求职信
2014/02/28 职场文书
学雷锋月活动总结
2014/04/25 职场文书
师德师风个人反思
2014/04/28 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
指导教师推荐意见
2015/06/05 职场文书
在职证明书模板
2015/06/15 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
员工升职自我评价
2019/03/26 职场文书
一行Python命令实现批量加水印
2022/04/07 Python