广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue中的Object.defineProperty全面理解
  • 238
分享到

Vue中的Object.defineProperty全面理解

2024-04-02 19:04:59 238人浏览 独家记忆
摘要

目录Object.defineProperty理解直接添加使用getter、setter 需要Object.defineProperty()注意点Object.define

Object.defineProperty理解

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

直接添加

let person = {
    name:'张三',
    sex:'男',
}
Object.defineProperty(person,'age',{
    value:18,
    enumerable:true,//控制属性是否可以枚举,默认值是false,当该属性的值为 true 时,该属性才会出现在对象的枚举属性中。
    writable:true,//控制属性是否可以被修改,默认值是false,当该属性的值为 true 时,才能被赋值运算符改变。
    configurable:true,//控制属性是否可以被删除,默认值是false,当该属性的值为 true 时,该属性能从对应的对象上被删除。  
             
})
console.log(person);

使用getter、setter 

let age_number = 18;
let person = {
    name:'张三',
    sex:'男',
}
Object.defineProperty(person,'age',{
    //value:18,
    //enumerable:true,//控制属性是否可以枚举,默认值是false,当该属性的值为 true 时,该属性才会出现在对象的枚举属性中。
    //writable:true,//控制属性是否可以被修改,默认值是false,当该属性的值为 true 时,才能被赋值运算符改变。
    //configurable:true,//控制属性是否可以被删除,默认值是false,当该属性的值为 true 时,该属性能从对应的对象上被删除。  
    get(){
        console.log("读取age属性");
        return age_number;
    },
    set(value)
    {
        console.log("修改age的值");
        age_number = value;
    }              
})
console.log(person);

需要Object.defineProperty()注意点

1.用Object.defineProperty方法创建一个新属性时,如果不指定configurabel,enumberable,writable特性的默认值都是false,修改已定义的属性特性无限制。

2.Configurable性定义为不可配置就不能把它变回可配置,此时调用Object.defineProperty修改除writable之外的特性都会报错。

3.模拟访问和设置的行为:想要访问器属性模拟默认行为的话,必须的在里面新添一个属性不然会造成循环引用

var obj={
a:1
};
 
Object.defineProperty(obj,"a",{
get:function(){
return this.a;
},
 
set:function(val){
this.a=val
}
});
obj.a;// Maximum call stack size exceeded

会造成循环引用,狂call不止

person.a → get.call(person) → this.a → person.a  → get.call(person) → this.a......

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: Vue中的Object.defineProperty全面理解

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

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue中的Object.defineProperty全面理解
    目录Object.defineProperty理解直接添加使用getter、setter 需要Object.defineProperty()注意点Object.define...
    99+
    2022-11-13
  • Vue中的Object.defineProperty怎么用
    这篇“Vue中的Object.defineProperty怎么用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue中的Ob...
    99+
    2023-06-30
  • 详解如何使用Object.defineProperty实现简易的vue功能
    目录vue 双向绑定的原理测试 MinVuevue 双向绑定的原理 实现 vue 的双向绑定,v-text、v-model、v-on 方法 Vue 响应系统,其核心有三点:obser...
    99+
    2023-05-16
    Object.defineProperty vue vue简易功能
  • vue$attrs的使用全面解析
    目录$attrs的使用vue以下是$attrs的使用示例1.父组件(Father.vue)2.儿子组件(Child.vue)3.孙子组件(GrandChild.vue)$attrs到...
    99+
    2022-11-13
  • 全面理解document.write()
    document.write() 是 JavaScript 中的一个方法,用于在 HTML 文档中动态生成内容。这个方法可以在网页加...
    99+
    2023-09-09
    理解
  • 全面理解Python中self的用法
    刚开始学习Python的类写法的时候觉得很是麻烦,为什么定义时需要而调用时又不需要,为什么不能内部简化从而减少我们敲击键盘的次数?你看完这篇文章后就会明白所有的疑问。 self代表类的实例,而非类。 实例来...
    99+
    2022-06-04
    Python
  • 全面了解java中的异常处理
    目录Java 异常处理1. 什么是异常2. Java 异常类架构2.1 Throwable 类2.2 Error 类2.3 Exception 类3. 如何进行异常处理4. 抛出异常4.1 实例4.2 throw4.3 throws5. 捕...
    99+
    2020-09-26
    java 异常处理
  • 对PyTorch中inplace字段的全面理解
    例如 torch.nn.ReLU(inplace=True) inplace=True 表示进行原地操作,对上一层传递下来的tensor直接进行修改,如x=x+3; ...
    99+
    2022-11-12
  • 一文带你全面理解Python中的self
    目录Python类的内置属性在class里面,是不是必须使用self对于初学Python的同学来说,在class中经常看到self。那么,到底self是个啥? 这得从面向对象说起。P...
    99+
    2023-03-03
    Python self用法 Python self
  • vue之proxyTable代理全面配置的方法
    本篇内容介绍了“vue之proxyTable代理全面配置的方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!介绍vue的proxyTable...
    99+
    2023-06-30
  • vue组件间通信全面讲解
    目录前言组件介绍一、父传子1. 父组件通过 props 传递数据给子组件2. 定义props的类型和默认值二、子传父子组件通过 $emit 传递数据给父组件三、非父子组件间数据传递1...
    99+
    2022-11-13
  • VUE生命周期全面系统详解
    目录什么是生命周期生命周期的作用vue生命周期有哪些Vue 生命周期总共分为几个阶段1)beforeCreate创建前2)created创建后3)beforeMounte挂载前4)m...
    99+
    2022-11-13
  • 对Jpa中Entity关系映射中mappedBy的全面理解
    目录对JpaEntity关系映射中mappedBy的理解对于mappedBy复习下举例说明Spring-jpa中mappedBy的作用使用@JoinColumn存在的问题使用mapp...
    99+
    2022-11-12
  • vue之proxyTable代理超全面配置流程
    目录前言介绍配置分离1. config.dev.js2. proxyTableHandler.js效果如下前言 用了vue有一年多了,从最初的摸着石头过河到现在已经能熟练的使用vue...
    99+
    2022-11-13
  • 全面解析CRM管理系统
    CRM管理系统,即客户关系管理系统,是一种用于管理与客户交互的软件工具。它可以帮助企业更好地了解和管理客户,提高客户满意度,从而提高销售和利润。本篇文章将详细介绍CRM管理系统的工作原理、特点、应用领域以及如何选择和实施CRM系统。 工作原...
    99+
    2023-11-23
    管理系统 CRM
  • 全面解析@InsertProvider执行原理
    目录@InsertProvider执行原理1.首先要拼接处insert语句2.ProviderSqlSource实现了sqlSource接口关于@Insert和@InsertProv...
    99+
    2022-11-13
  • Mysql分库分表全面理解
    引言 微服务、分布式大行其道的当下,中、高级Java工程师面试题中高并发、大数据量、分库分表等已经成 了面试的高频词汇,这些知识不了解面试通过率不会太高。你可以不会用,但你不能不知道,就是这么 一种现状。技术名词大多晦涩难懂,不要死...
    99+
    2019-05-21
    Mysql分库分表全面理解
  • Mongoose学习全面理解(推荐)
    一、创建schemas 创建schemas的方式: var userSchema = new mongoose.Schema({ name: String, email: String, ...
    99+
    2022-06-04
    Mongoose
  • Java之CountDownLatch原理全面解析
    目录CountDownLatch原理解析1. demo展示2. 原理解析Java CountDownLatch学习总结来源包业务书写示例一般代码示例CountDownLatch原理解...
    99+
    2022-11-13
    Java CountDownLatch CountDownLatch原理 CountDownLatch原理解析
  • 全面解析JavaScript中null
    目录1.null 的概念1.1 null 的一个比较贴切的比喻2. 如何去检测 null2.1 null 是一个假值2.2 typeof null3. null 的陷阱4. null...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作