返回顶部
首页 > 资讯 > 前端开发 > 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://lsjlt.com/news/147784.html(转载时请注明来源链接)

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

猜你喜欢
  • Vue中的Object.defineProperty全面理解
    目录Object.defineProperty理解直接添加使用getter、setter 需要Object.defineProperty()注意点Object.define...
    99+
    2024-04-02
  • 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+
    2024-04-02
  • 全面理解Python中self的用法
    刚开始学习Python的类写法的时候觉得很是麻烦,为什么定义时需要而调用时又不需要,为什么不能内部简化从而减少我们敲击键盘的次数?你看完这篇文章后就会明白所有的疑问。 self代表类的实例,而非类。 实例来...
    99+
    2022-06-04
    Python
  • 全面理解document.write()
    document.write() 是 JavaScript 中的一个方法,用于在 HTML 文档中动态生成内容。这个方法可以在网页加...
    99+
    2023-09-09
    理解
  • 全面了解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+
    2024-04-02
  • vue之proxyTable代理全面配置的方法
    本篇内容介绍了“vue之proxyTable代理全面配置的方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!介绍vue的proxyTable...
    99+
    2023-06-30
  • VUE Nuxt.js 中间件:全面解析,尽在掌握!
    : 一、Nuxt.js 中间件概述 在 Nuxt.js 中,中间件是一个特殊类型的插件,它允许开发者在请求处理的各个阶段对请求和响应进行拦截和修改。中间件可以用来执行各种任务,例如身份验证、数据获取、缓存和错误处理等。中间件在 Nuxt....
    99+
    2024-02-22
    : Vue Nuxt.js 中间件 路由 数据获取 错误处理 性能优化
  • 一文带你全面理解Python中的self
    目录Python类的内置属性在class里面,是不是必须使用self对于初学Python的同学来说,在class中经常看到self。那么,到底self是个啥? 这得从面向对象说起。P...
    99+
    2023-03-03
    Python self用法 Python self
  • vue组件间通信全面讲解
    目录前言组件介绍一、父传子1. 父组件通过 props 传递数据给子组件2. 定义props的类型和默认值二、子传父子组件通过 $emit 传递数据给父组件三、非父子组件间数据传递1...
    99+
    2024-04-02
  • 对Jpa中Entity关系映射中mappedBy的全面理解
    目录对JpaEntity关系映射中mappedBy的理解对于mappedBy复习下举例说明Spring-jpa中mappedBy的作用使用@JoinColumn存在的问题使用mapp...
    99+
    2024-04-02
  • VUE生命周期全面系统详解
    目录什么是生命周期生命周期的作用vue生命周期有哪些Vue 生命周期总共分为几个阶段1)beforeCreate创建前2)created创建后3)beforeMounte挂载前4)m...
    99+
    2024-04-02
  • vue之proxyTable代理超全面配置流程
    目录前言介绍配置分离1. config.dev.js2. proxyTableHandler.js效果如下前言 用了vue有一年多了,从最初的摸着石头过河到现在已经能熟练的使用vue...
    99+
    2024-04-02
  • 解锁 VUE 的新高度:TypeScript 全面支持指南
    Vue,一个进步且易于使用的 JavaScript 框架,在开发单页面应用程序 (SPA) 方面备受推崇。然而,随着应用程序变得更大更复杂,管理代码库和确保其质量就变得至关重要。TypeScript 的引入为 Vue 开发人员提供了一种...
    99+
    2024-03-09
    Vue、TypeScript、类型检查、代码维护、性能优化
  • 构建高效的VUE应用:全面解析VUE路由懒加载
    一、VUE路由懒加载的原理 VUE路由懒加载的原理是将组件的加载从初始页面加载中分离出来,而是等到用户需要的时候才加载。这可以减少初始页面加载的时间,并提高页面的性能。 实现VUE路由懒加载有两种方法: 使用 @ 路由别名进行懒加载:...
    99+
    2024-02-14
    VUE 路由 懒加载 组件 性能
  • 理解Reviverevive,全面解析其本质
    reviverevive 是一种编程技术,允许动态加载和卸载运行中应用程序的代码,从而实现应用程序的实时更新和扩展。它利用 java reflection api,可以通过加载新类、调用...
    99+
    2024-04-08
  • 全面理解Java中的引用传递和值传递
    目录1.基本类型和引用类型在内存中的保存2.变量的基本类型和引用类型的区别3.引用传递和值传递4.结论关于Java传参时是引用传递还是值传递,是一个讨论比较多的话题, 有说Java中...
    99+
    2024-04-02
  • 全面解析JavaScript中null
    目录1.null 的概念1.1 null 的一个比较贴切的比喻2. 如何去检测 null2.1 null 是一个假值2.2 typeof null3. null 的陷阱4. null...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作