当前位置: 首页 > news >正文

对象管理器(defineProperty)学习笔记

对象管理器(defineProperty)

在 JavaScript 里面声明一个变量,通常我们有三种方式可以实现:

    let person = {} // 对象字面量
    let cat = new Object() // new 运算符
    let dog = Object.create(null) // create 函数

我们可以简单的将 key 值和 value 值赋进去,但在 ES5 中 JavaScript 提供了一个对象管理器的方法给我们,让我们可以很精细的对每一个属性定制它们的行为,我们分别可以为属性设置:

  • 可配置特性(configurable)

  • 可枚举属性(enumerable)

  • 可以写特性(writable)

  • 值(value)

  • 设置 getter 方法(get)

  • 设置 setter 方法(set)

首先让我们看看如何使用Object.defineProperty来定制属性吧:

  let person = {}

  Object.defineProperty(person, 'name', {
  configurable: true,
  enumerable: true,
  writeable: true,
  value: '_我已经从中二毕业了'
  })

  Object.defineProperty(person, 'age', {
  configurable: true,
  enumerable: true,
  writeable: true,
  value: 18
  })

  console.log(person.name) // _我已经从中二毕业了
  console.log(person.age) // 18

通过上面的代码可以看出 Object.defineProperty 这个函数能够接受三个参数:

  1. obj:需要定义属性的对象

  2. prop:需被定义或修改的属性名

  3. descriptor:需被定义或修改的属性的描述符

语法

Object.defineProperty(obj, prop, descriptor)

可配置特性(configurable)

当 configurable 这个属性为 true 的时候表示这个属性可以从父对象中删除。当 configurable 设置为 false 的时候就会锁定这个属性,无法被修改。通过设置 configurable 我们可以将一些属性锁定,来防止别人的修改,这是一种防御编程形式,就像语言的内置对象一样(不过 JavaScript 的内置对象都可以被随意更改)。

  let person = {}

  Object.defineProperty(person, 'name', {
  configurable: false,
  value: '_我已经从中二毕业了'
  })

  Object.defineProperty(person, 'age', {
  configurable: true,
  value: 18
  })

  delete person.name
  console.log(person.name) // _我已经从中二毕业了

  delete person.age
  console.log(person.age) // undefined

  person.name = 'John'
  console.log(person.name) // _我已经从中二毕业了

  person.age = 19
  console.log(person.age) // 19

可枚举属性(enumerable)

一般来说我们会通过for in操作来遍历可以枚举的属性。当然我们也可以设置属性为不可枚举,这些属性就不能够被枚举了,从而防止遍历查找到这个属性。可以使用 propertyIsEnumerable 来判断某一个属性是否可以枚举。

  let person = {}

  Object.defineProperty(person, 'name', {
    enumerable: true,
    value: '_我已经从中二毕业了'
  })

  Object.defineProperty(person, 'age', {
    enumerable: false,
    value: 18
  })
    
  // 只输出了 name    
  for (var key in person) {
    console.log(key)
  }

  console.log(Object.keys(person)) // ["name"]
  console.log(Object.getOwnPropertyNames(person)) // ["name", "age"]
  console.log(person.propertyIsEnumerable('name')) // true
  console.log(person.propertyIsEnumerable('age')) // false
  console.log(person.age) // 18

可以写特性(writable)

当 writable 为 true 的时候,与属性相关联的值是可以更改的。否则,值就不能改变。

  let person = {}
  let person2 = person

  Object.defineProperty(person, 'name', {
    writable: false,
    value: '_我已经从中二毕业了'
  })

  Object.defineProperty(person, 'age', {
    writable: true,
    value: 18
  })

  person.name = 'John'
  console.log(person.name) // _我已经从中二毕业了
  console.log(person2.name) // _我已经从中二毕业了

  person.age = 19
  console.log(person.age) // 19
  console.log(person.age) // 19

  person2.name = 'John'
  console.log(person.name) // _我已经从中二毕业了
  console.log(person2.name) // _我已经从中二毕业了

  person2.age = 20
  console.log(person.age) // 20
  console.log(person.age) // 20

相关链接

  • Object.defineProperty()

  • Object.keys()

  • Object.getOwnPropertyNames()

  • Object.prototype.propertyIsEnumerable()

相关文章:

  • ajax的登录页面,发送post方式
  • AHK 中 = 和 == 等比较运算符的用法
  • nodejs的简单分析理解
  • NPM的操作步骤
  • Zabbix监控Windows主机
  • promise解决回调地狱的方法之一
  • HTML5的兼容性测试
  • 为了Cisco UC,36年来家中第一次安装固话
  • 链式调用和解决回调地狱的终极解决方法async,await
  • jquery的使用
  • 探究JVM——垃圾回收
  • jQuery的节点操作
  • 大数据计算新贵Spark在腾讯雅虎优酷成功应用解析
  • jQuery获取元素尺寸
  • ASP.NET MVC 开源建站系统 ZKEACMS 推荐,从此网站“拼”起来
  • [iOS]Core Data浅析一 -- 启用Core Data
  • AngularJS指令开发(1)——参数详解
  • CSS 专业技巧
  • HTTP中的ETag在移动客户端的应用
  • iOS | NSProxy
  • Netty 框架总结「ChannelHandler 及 EventLoop」
  • PHP 的 SAPI 是个什么东西
  • Vue官网教程学习过程中值得记录的一些事情
  • 安卓应用性能调试和优化经验分享
  • 第13期 DApp 榜单 :来,吃我这波安利
  • 分享自己折腾多时的一套 vue 组件 --we-vue
  • 服务器从安装到部署全过程(二)
  • 关于 Cirru Editor 存储格式
  • 关于字符编码你应该知道的事情
  • 聚簇索引和非聚簇索引
  • 前端存储 - localStorage
  • “十年磨一剑”--有赞的HBase平台实践和应用之路 ...
  • 【运维趟坑回忆录 开篇】初入初创, 一脸懵
  • # Maven错误Error executing Maven
  • #vue3 实现前端下载excel文件模板功能
  • (09)Hive——CTE 公共表达式
  • (1)(1.11) SiK Radio v2(一)
  • (14)目标检测_SSD训练代码基于pytorch搭建代码
  • (2)(2.10) LTM telemetry
  • (5)STL算法之复制
  • (51单片机)第五章-A/D和D/A工作原理-A/D
  • (pojstep1.3.1)1017(构造法模拟)
  • (备忘)Java Map 遍历
  • (附源码)ssm高校运动会管理系统 毕业设计 020419
  • (附源码)ssm旅游企业财务管理系统 毕业设计 102100
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理第3章 信息系统治理(一)
  • (一)使用IDEA创建Maven项目和Maven使用入门(配图详解)
  • (转)jQuery 基础
  • (转)树状数组
  • (转载)OpenStack Hacker养成指南
  • .FileZilla的使用和主动模式被动模式介绍
  • .NET C#版本和.NET版本以及VS版本的对应关系
  • .NET Standard 支持的 .NET Framework 和 .NET Core
  • .Net Web项目创建比较不错的参考文章
  • .netcore 如何获取系统中所有session_ASP.NET Core如何解决分布式Session一致性问题