返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS Object构造函数之Object.freeze
  • 950
分享到

JS Object构造函数之Object.freeze

2024-04-02 19:04:59 950人浏览 泡泡鱼
摘要

目录概述示例1) 冻结对象2) 冻结数组3) 浅冻结4) 深冻结存在的意义概述 Object.freeze(obj)可以冻结一个对象。一个被冻结的对象再也不能被修改; 冻结了一个对象

概述

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的资料请关注编程网其它相关文章!

--结束END--

本文标题: JS Object构造函数之Object.freeze

本文链接: https://lsjlt.com/news/124843.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JS Object构造函数之Object.freeze
    目录概述示例1) 冻结对象2) 冻结数组3) 浅冻结4) 深冻结存在的意义概述 Object.freeze(obj)可以冻结一个对象。一个被冻结的对象再也不能被修改; 冻结了一个对象...
    99+
    2024-04-02
  • js构造函数怎么用
    这篇文章将为大家详细讲解有关js构造函数怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。说明构造函数名的首字母必须大写。构造函数无需return即可返回结果。调用结构函数必须使用new关键词,只需ne...
    99+
    2023-06-20
  • C++修炼之构造函数与析构函数
    目录🌷默认成员函数🌷构造函数🌺引例🌺构造函数的概念及特性🌷析构函数🌺析构函数的特性🌷默认成员函数 上一章中我们谈到,如果一个类中什么成员也没有,那么这个类就叫作空类。其实这么说是不太...
    99+
    2023-05-14
    C++构造函数概念 C语言析构函数特性
  • JS深入浅出Function与构造函数
    目录 1.概述1.1利用Function构造函数创建函数1.2Function与Object2.构造函数2.1自定义否则函数2.2对象的constructor属性2.3构造函数与函数...
    99+
    2024-04-02
  • JS的Function与构造函数怎么使用
    这篇文章主要讲解了“JS的Function与构造函数怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JS的Function与构造函数怎么使用”吧! 1.概述Function是...
    99+
    2023-06-21
  • C++修炼之拷贝构造函数
    目录💐文章导读🌷拷贝构造函数的概念🌷拷贝构造函数的特性💐文章导读 本章主要内容为6个默认成员函数之一的拷贝构造函数的认识与学习,充分理解浅拷贝与深拷贝。 🌷拷贝构造函数的概念 还记得...
    99+
    2023-05-14
    C++拷贝构造函数 C++构造函数 拷贝构造函数
  • C++踩坑实战之构造和析构函数
    目录前言构造函数 通过构造函数实现的类型转换 派生类的构造函数 析构函数 继承中的析构函数 应用 总结前言 我是练习时长一年的 C++ 个人练习生,喜欢野指针、模板报错和未定义行为(...
    99+
    2024-04-02
  • C++:构造函数,析构函数详解
    目录前言一、面向对象二、构造函数1.基本概念2.构造函数重载1.构造函数分类2.有参构造函数:3.有参构造函数3个调用规则:4.拷贝构造函数5.析构函数总结前言 上期了解C++类中有...
    99+
    2024-04-02
  • C++类与对象深入之构造函数与析构函数详解
    目录对象的初始化和清理一:构造函数1.1:构造函数的特性1.2:构造函数的分类二:析构函数2.1:概念2.2:特性三:拷贝构造函数3.1:概念3.2:特性3.3:拷贝构造函数调用时机...
    99+
    2024-04-02
  • JS构造函数中this和return的区别是什么
    本篇文章给大家分享的是有关JS构造函数中this和return的区别是什么,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。先看一段代码,func...
    99+
    2024-04-02
  • JS中构造函数的基本特性与优缺点
    构造函数:如用函数用来初始化(使用new运算符)一个新建的对象,我们称之为构造函数(constructor) function Person(){ this.name = "...
    99+
    2024-04-02
  • JavaScript构造函数与原型之间的联系
    目录一、构造函数和原型1、构造函数2、构造函数的问题3、构造函数原型 prototype4、对象原型 __proto__5、constructor 构造函数6、构造函数、实例、原型对...
    99+
    2024-04-02
  • C#构造函数详解
    一、简介 构造函数,基本用法是在类对象声明的时候完成初始化工作。 二、实例构造函数 1、构造函数的名字与类名相同。 2、使用 new 表达式创建类的对象或者结构(例如int)时,会调...
    99+
    2024-04-02
  • C#如何构造函数
    本篇内容主要讲解“C#如何构造函数”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“C#如何构造函数”吧!CLR Via C#中构造函数是可以将类型实例初始化为有效状态的特殊方法。构造函数在元数据中...
    99+
    2023-06-17
  • Python 含参构造函数
    本篇博文主要介绍在Python3中如何构造含参构造函数 样例如下: class MyOdlHttp: username = '' password = '' def __init__(self, user...
    99+
    2023-01-31
    函数 Python
  • 详解C++构造函数
    目录1.作用2.代码举例2.1 示例1:2.2 示例2:3. 使用3.1 使用构造函数初始化3.2 有参数的构造函数3.3 默认的构造函数4. 成员初始化列表例1:正常初始化例2:成...
    99+
    2024-04-02
  • C++构造函数详解
    文章转自公众号:Coder梁(ID:Coder_LT) 上一篇文章我们介绍了定义了类,在使用之前,往往还需要对类进行初始化。这篇介绍的就是对类进行初始化的方法。 像是结构体,我们可以...
    99+
    2024-04-02
  • PHP 中的构造函数
    在本文中,我们将介绍 PHP 构造函数。我们将看到如何使用 __construct() 函数来初始化类中实例的属性。 我们还将使用该函数来初始化类中具有给定参数的对象的属性。 最后,我们将看到如...
    99+
    2024-02-27
  • C++的构造函数和析构函数是什么
    本篇内容主要讲解“C++的构造函数和析构函数是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“C++的构造函数和析构函数是什么”吧!目录一、构造函数二、C++类的内存模型1、只定义成员函数2、...
    99+
    2023-06-20
  • C++构造函数与析构函数怎么使用
    这篇文章主要讲解了“C++构造函数与析构函数怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“C++构造函数与析构函数怎么使用”吧!对象的初始化和清理生活中我们买的电子产品都基本会有出厂...
    99+
    2023-07-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作