对象管理器（defineProperty）学习笔记

mist14 发布于2019-08-19 18:13 / 2475人阅读

摘要：通过设置我们可以将一些属性锁定，来防止别人的修改，这是一种防御编程形式，就像语言的内置对象一样不过的内置对象都可以被随意更改。可以使用来判断某一个属性是否可以枚举。

对象管理器（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 这个函数能够接受三个参数：

obj：需要定义属性的对象

prop：需被定义或修改的属性名

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()

GPU服务器私有云学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79332.html

JS学习笔记（第6章）（面向对象的程序设计之理解对象）

摘要：其中，描述符对象的属性必须是和。吧设置为，表示不能从对象中删除属性。这个方法接收两个对象参数要添加和修改其属性值的对象，第二个是与第一个对象中要添加和修改的属性值一一对应。理解对象 1、创建自定义对象的两种方法：（1）创建一个Object实例，然后再为它添加属性和方法。 var person = new Object(); person.name = Nicholas; ...

FingerLiu 2019-08-26 13:33 评论0 收藏0
vue数据双向绑定学习笔记。

摘要：订阅者的实现如下将自己添加到订阅器的操作缓存自己强行执行监听器里的函数释放自己到此为止，简单版的设计完毕，这时候我们需要将和关联起来，就可以实现一个简单的双向数据绑定了。同样使用数据劫持。。什么是双向绑定简单说就是在数据和UI之间建立双向的通信通道，当用户通过Function改变了数据，那么这个改变也会立即反映到UI上；或者说用户通过UI的操作也会随之引起对应的数据变动。Vue是如...

huashiou 2019-08-23 16:25 评论0 收藏0
JavaScript Object.defineProperty()学习笔记。

摘要：数据属性有个描述其行为的特性。表示能否通过删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。表示能否修改属性的值。其中，描述符对象的属性必须是和。返回值被传递给函数的对象。属性类型 ECMAScript中有两种属性：数据属性和访问器属性。数据属性：数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有4个描述其行为的特性。 [[Configu...

lushan 2019-08-23 16:13 评论0 收藏0
《你不知道的javascript》笔记_对象&原型

摘要：上一篇你不知道的笔记写在前面这是年第一篇博客，回顾去年年初列的学习清单，发现仅有部分完成了。当然，这并不影响年是向上的一年在新的城市稳定连续坚持健身三个月早睡早起游戏时间大大缩减，学会生活。上一篇：《你不知道的javascript》笔记_this 写在前面这是2019年第一篇博客，回顾去年年初列的学习清单，发现仅有部分完成了。当然，这并不影响2018年是向上的一年：在新的城市稳定、...

seasonley 2019-08-23 14:32 评论0 收藏0
vue 双向数据绑定的实现学习（一）

摘要：双向数据绑定简言之数据动页面动，页面动，数据动典型的应用就是在做表单时候，输入框的内容改动后，跟该输入框的的值改动。看官网上的这个的演示案例双向数据绑定的好处要说出这个好处的时候，也只有在实际场景中才能对应的显示出来。前言：本系列学习笔记从以下几个点展开什么是双向数据绑定双向数据绑定的好处怎么实现双向数据绑定实现双向数据数据绑定需要哪些知识点数据劫持发布订阅模式 ...

anonymoussf 2019-08-23 13:47 评论0 收藏0