js 使用 Object.defineProperty() 对属性进行限制 06

news2024/10/7 6:47:15

小夏小夏,可爱到爆炸 🤣 💕💕💕

文章目录

  • 一、对属性操作的控制
  • 二、属性描述符
  • 三、数据属性描述符
  • 四、存取属性描述符
  • 五、vue2 响应式原理
  • 六、defineProerties 同时定义多个属性
  • 七、对象方法补充


一、对属性操作的控制

        如果我们想要对一个属性进行比较精准的操作控制,比如:这个属性是否允许属性被赋值?是否可以被删除?事发后可以被遍历出来?那么我们就可以使用 属性描述符。

  1. 通过属性描述符可以精准的添加或修改对象的属性;
  2. 属性描述符需要使用 Object.defineProperty 来对属性进行添加或者修改;

Object.defineProperty() 方法会直接在一个对象上定义一个新属性或者修改一个对象的现有属性,并返回此
对象。


	Object.defineProperty(obj,props,descriptor)

接收值:

  1. obj要定义属性的对象;
  2. prop要定义或修改的属性的名称或 Symbol;
  3. descriptor要定义或修改的属性描述符;

返回值:

    被传递给函数的对象

二、属性描述符


分类

  1. 数据属性(Data Properties)描述符(Descriptor);
  2. 存取属性(Accessor访问器 Properties)描述符(Descriptor);

也就是说: value writable 不能和 get set 同存
在这里插入图片描述

三、数据属性描述符

特性

  1. [[Configurable]]: 表示属性是否可以通过delete删除属性,是否可以修改它的特性,或者是否可以将它修改为存取属性描述符;
    • 当我们直接在一个对象上定义某个属性时,这个属性的[[Configurable]]为true;
    • 当我们通过属性描述符定义一个属性时,这个属性的[[Configurable]]默认为false;
  2. [[Enumerable]]: 表示属性是否可以通过for-in或者Object.keys()返回该属性;
    • 当我们直接在一个对象上定义某个属性时,这个属性的[[Enumerable]]为true;
    • 当我们通过属性描述符定义一个属性时,这个属性的[[Enumerable]]默认为false;
  3. [[Writable]]: 表示是否可以修改属性的值;
    • 当我们直接在一个对象上定义某个属性时,这个属性的[[Writable]]为true;
    • 当我们通过属性描述符定义一个属性时,这个属性的[[Writable]]默认为false;
  4. [[value]]: 属性的value值,读取属性时会返回该值,修改属性时,会对其进行修改;
    • 默认情况下这个值是undefined;

在这里插入图片描述

四、存取属性描述符


作用

  1. 隐藏某一个私有属性并希望直接被外界使用和赋值
  2. 如果我们希望截获某个属性它访问和设置值的过程时,也会是使用

特性

  1. [[Configurable]]: 表示属性是否可以通过delete删除属性,是否可以修改它的特性,或者是否可以将它修改为存取属性
    描述符;
    • 和数据属性描述符是一致的;
    • 当我们直接在一个对象上定义某个属性时,这个属性的[[Configurable]]为true;
    • 当我们通过属性描述符定义一个属性时,这个属性的[[Configurable]]默认为false;
  2. [[Enumerable]]: 表示属性是否可以通过for-in或者Object.keys()返回该属性;
    • 和数据属性描述符是一致的;
    • 当我们直接在一个对象上定义某个属性时,这个属性的[[Enumerable]]为true;
    • 当我们通过属性描述符定义一个属性时,这个属性的[[Enumerable]]默认为false;
  3. [[get]]: 获取属性时会执行的函数。默认为undefined
  4. [[set]]: 设置属性时会执行的函数。默认为undefined
    在这里插入图片描述

五、vue2 响应式原理

         利用了存取属性描述符,data 是个函数,返回一个对象,利用object.key 获取到 data 里所有的 key ,对每个key 利用 defineproperty 的存取属性描述符截获它的get 和 set, 如果某个地方data 里的数据对依赖发生改变,就从依赖里取或者执行


	Object.keys(obj).forEach((key)=>{
		Object.defineProperty(obj,key,{
		get:
		set:
		}),
	})

六、defineProerties 同时定义多个属性

  • Object.defineProperties() 方法直接在一个对象上定义 多个 新的属性或修改现有属性,并且返回该对象。
  • 第一个是要操作的对象,第二个是个对象用于描述多个新的属性
  • 在这里插入图片描述

七、对象方法补充

  1. getOwnPropertyDescriptor 和 getOwnPropertyDescriptors 获取属性描述符

    //  获取某个特性属性的属性描述符
	console.log(Object.getOwnPropertyDescriptor(obj,'name'))
	
	//  获取对象所有属性描述符 (多了一个 s)
	console.log(Object.getOwnPropertyDescriptors(obj))
	
  1. getOwnPropertyDescriptors 禁止对象继续添加新的属性 (在严格模式下会报错)

	Object.getOwnPropertyDescriptors(obj)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/860412.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

勘探开发人工智能技术:机器学习(5)

0 提纲 6.1 矩阵分解 6.2 全连接 BP 神经网络 6.3 卷积神经网络 6.4 LSTM 6.5 Transformer 6.6 U-Net 1 矩阵分解 把稀疏矩阵分解成两个小矩阵的乘积, 恢复后的矩阵用于预测. 1.1 基本概念 矩阵分解是使用数学应对机器学习问题的一类典型而巧妙的方法. 矩阵分解是把将一个…

数字万用表测量基础知识--DMM的显示位数

概览 DMM(即数字万用表)是一种电气测试和测量仪器,可测量直流和交流信号的电压、电流和电阻。本文介绍如何正确使用和理解数字万用表(DMM)。 DMM的显示位数 数字万用表(DMM)可用于进行各种测量。在选择DMM或理解所使用的DMM时,首…

jupyter切换conda虚拟环境

环境安装 conda install nb_conda 进入你想使用的虚拟环境: conda activate your_env_name 在你想使用的conda虚拟环境中: conda install -y jupyter 在虚拟环境中安装jupyter: conda install -y jupyter 重启jupyter 此时我们已经把该安装…

【学习FreeRTOS】第3章——FreeRTOS移植及配置文件

1.FreeRTOS源码简介 【一级目录:/】以下FreeRTOS的源码,其中,FreeRTOS文件夹最为重要,代笔FreeRTOS内核 【二级目录:/FreeRTOS】以下为FreeRTOS文件夹的内容,比较重要的有Demo文件夹和Source文件夹 【三级…

【使用Hilbert变换在噪声信号中进行自动活动检测】基于Hilbert变换和平滑技术进行自动信号分割和活动检测研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

linux文件I/O之 close()、lseek()、read()、write() 函数用法

1. close() 函数 头文件和函数声明 #include <unistd.h> int close(int fd); 函数功能 关闭一个文件描述符 返回值 成功时返回 0。失败则返回 -1&#xff0c;并设置 errno 为相应的错误标志。 参数 fd&#xff1a;文件描述符 说明 像其它所有系统调用一样&…

UNet Model

论文地址 第一阶段 conv2d(33) first conv&#xff1a;5725721 → 57057064 second conv&#xff1a;57057064 → 56856864 代码 # first 33 convolutional layer self.first nn.Conv2d(in_channels, out_channels, kernel_size3, padding1) self.act1 nn.ReLU() # Seco…

渠道订货管理:品牌商建立渠道连接的纽带

当品牌商&#xff08;厂商&#xff09;渠道拓展到一定规模&#xff0c;处理不同渠道交易数据&#xff0c;面对信息流、物流、资金流链路&#xff0c;提升厂商端、经销商端、终端门店的订货体验就会变得尤为重要&#xff0c;特别是一些实力级厂商&#xff0c;渠道下沉能够掌握终…

同步代码块使用错误示范 | 用了synchronized还是出现“超取”问题

记录一下错误&#xff0c;吸取经验&#x1f914;&#x1f60b; 出问题的代码 public class Test {public static void main(String[] args) {new Thread(new Account()).start(); //&#xff01;&#xff01;new Thread(new Account()).start(); //&#xff01;&#xff01;}…

Lecoode有序数组的平方977

题目建议&#xff1a; 本题关键在于理解双指针思想 题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 文章讲解&#xff1a;代码随想录 视频讲解&#xff1a; 双指针法经典题目 | LeetCode&#xff1a;977.有序数组的平方_哔哩…

​朋友圈评论截图生成,制作朋友圈网页​

朋友圈头像&#xff0c;上传自己的朋友圈头像&#xff1b;不填默认随机 网名&#xff0c;填写微信昵称&#xff1b; 内容&#xff0c;需要发布的微信正文内容&#xff1b; 截图类型&#xff0c;支持纯文字、图片&#xff08;单张、九宫格&#xff09;、分享网页/公众号文章共…

Webstorm + Egg.js 进行断点调试

Webstorm Egg.js 进行断点调试 1、在工具栏找到编辑配置&#xff0c;创建已运行Node.js 应用程序的调试配置 2、debug调试配置 3、调试 4、查看断点是否起效

【数据结构与算法】十大经典排序算法-希尔排序

&#x1f31f;个人博客&#xff1a;www.hellocode.top &#x1f3f0;Java知识导航&#xff1a;Java-Navigate &#x1f525;CSDN&#xff1a;HelloCode. &#x1f31e;知乎&#xff1a;HelloCode &#x1f334;掘金&#xff1a;HelloCode ⚡如有问题&#xff0c;欢迎指正&#…

易服客工作室:7个优质WordPress LMS线上教育系统插件比较(优点和缺点)

您是否正在为您的 WordPress 网站寻找最好的 LMS 插件&#xff1f;在线学习管理系统 (LMS) 插件允许您使用 WordPress 创建和运行类似 Udemy 的在线课程。 一个完美的 WordPress LMS 插件包括管理在线课程内容、处理订阅、运行和评分测验、接受付款等功能。 在本文中&#xf…

KMP字符串 (简单清晰/Java)

Kmp算法 解决问题&#xff1a; 字符串匹配问题 怎么解决&#xff1f; 前缀表next[]数组 #分析 先看暴力做法&#xff1a; 两层for循环&#xff0c;一层遍历文本串&#xff0c;一层遍历模式串&#xff08;子串&#xff09;对应的每个字符进行匹配&#xff0c;匹配成功就 i &a…

【前端】求职必备知识点2-CSS:优先级、盒子模型、标准流、浮动流、定位流

文章目录 CSS优先级盒子模型标准流、浮动流、定位流标准流浮动流定位流 思维导图 CSS优先级 class类选择器&#xff0c;属性选择器&#xff0c;伪类 的权值为10元素选择器、伪元素选择器权值为1 属性选择器&#xff1a;如&#xff0c;将有title的元素变为红色。 [title] { co…

Python pygame(GUI编程)模块最完整教程(8)

上一篇文章&#xff1a; Python pygame(GUI编程)模块最完整教程&#xff08;7&#xff09;_Python-ZZY的博客-CSDN博客 总目录&#xff1a; README.md Python-ZZY/Python-Pygame最完整教程 - Gitee.com 23 进阶声音操作 参考资料&#xff1a; https://pyga.me/docs/ref/…

在编程下仰望

编程的尽头是数学 数学的尽头是物理 物理的尽头是哲学 哲学的尽头是耶稣 路漫漫其修远兮&#xff0c; 各位码农同仁 好自珍重

Kafka第一课概述与安装

生产经验 面试重点 Broker面试重点 代码,开发重点 67 章了解 如何记录行为数据 1. Kafka概述 1.产生原因 前端 传到日志 日志传到Flume 传到HADOOP 但是如果数据特比大&#xff0c;HADOOP就承受不住了 2.Kafka解决问题 控流消峰 Flume传给Kafka 存到Kafka Hadoop 从Kafka…

geoserver编辑样式 【开发工具QGis的初次使用】

geoserver编辑样式 开发工具配置中文语言 geoserver样式的更改 开发工具 链接: geoserver样式style的更改 链接: QGis开发工具的安装及使用 配置中文语言 setting > options > general > 中文 geoserver样式的更改 链接: geoserver样式style的更改 利用QGIs Q…