冻结JS对象方法技术详解

简介: 看到这个标题你可能会很奇怪冻结JS对象,啊!又触碰到我的知识盲区了,那么首先来了解一下JS对象

冰封的美人——冻结JS对象

看到这个标题你可能会很奇怪冻结JS对象,啊!又触碰到我的知识盲区了,那么首先来了解一下JS对象

JS对象

js对象是普通对象,键值对方式,且其属性不加引号,表示方法如下,对象内有对象属性,对象方法和普通的对象概念相同

var obj = {
    name : "cxy",
    age : "18"
}
复制代码

而我们修改对象的属性,仅仅需要obj.name = "juejin"即可console.log(obj.name)打印出来即可看到修改效果,那么冻结又是什么意思呢?我们来学习一下Object.freeze()

Object.freeze

翻译下freeze的意思,由此得知freeze()是用来冻结对象的方法,我们只需要将我们要冻结的目标对象作为参数传递给他,那么该对象就会被冻结

1.webp.jpg

const iceObj = Object.freeze(obj)
复制代码

这样iceObj就是被冻结的对象,那么冻结又是什么概念呢?我们修改一下对象的age属性iceObj.age = "19",然后再打印一下console.log(iceObj.age)我们会发现,omygod,依旧是18,不愧是永远十八岁的冰封美人,除此之外还有一个检验对象冻结的方法即Object.isFrozen,返回值为布尔值

不可冻结的对象

又有新的问题了,难不成所有的对象都可以被冻结吗?nonono,Object.freeze()不可冻结嵌套对象,依旧是那个对象,但是有一个son属性本身又是一个对象

var obj = {
    name : "cxy",
    age : "18"
    son : {
    name : "son",
    age : "1"
    }
}
复制代码

我们来修改并打印一下son中的name属性,会发现其属性值是修改后的值,所以说Object.freeze()并不是所有对象都能冻住的,当然其object.freeze()还可以冻结数组,大家可以定义一个数组,冻结之后,使用下标修改看看效果如何,除此之外还有一共冻结方法即object.seal()它和object.freeze()有差别,我们来看一下

Object.seal

var obj = {
    name : "cxy",
    age : "18"
}
const iceObj = Object.seal(obj)
iceObj.name = "juejin"
delete iceObj.age
console.log(iceObj)
复制代码

依旧是那个对象,我们先使用object.seal()冻结再执行修改name属性,删除age属性的操作,最后打印我们会发现name属性成功被修改,但是age属性没有被删除,这就是和freeze()不一样的地方,即可以修改属性值,但是不可以删除属性值,当然同样它还有一个检验对象冻结的方法即Object.isSealed,返回值为布尔值,最后还有一种冻结的方法即Object.preventExtensions()

Object.preventExtensions

Object.preventExtensions是冻结对象增加属性的能力

var obj = {
    name : "cxy",
    age : "18"
}
const iceObj = Object.preventExtensions(obj)
iceObj.weight = "180"
console.log(iceObj)
复制代码

上述代码是为obj新增weight属性,但是打印出来后并没有出现该属性,说明对象添加属性方法被冻结了。


相关文章
|
2月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
51 1
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
2月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
3月前
|
缓存 监控 前端开发
JavaScript 实现大文件上传的方法
【10月更文挑战第17天】通过以上步骤和方法,我们可以实现较为可靠和高效的大文件上传功能。当然,具体的实现方式还需要根据实际的应用场景和服务器要求进行调整和优化。
|
2月前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
146 52
|
2月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
2月前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
55 5
|
2月前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
32 1
|
2月前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
49 7