再次学习对象属性及Object.defineProperty()方法

Daming 2019-07-09
1条评论 1,011 次浏览
Daming 2019-07-091条评论 1,011 次浏览

对象是一个属性集合,对象的基本特征是属性名和属性值.
通常定义对象的属性 是通过点 或者方括号来定义:
obj.name ='crazyming' 或者 obj['name']='crazyming'

他们等同于 使用Object.defineProperty这个api来定义属性:

Object.defineProperty(Person, "name",{
value:'crazyming',//属性的值
writable: true,    // 设置属性是否可写
enumerable: true,   // 设置属性是否可枚举(可用for ... in ...遍历)
configurable: true  // 设置属性是否可配置(可用defineProperty设置)及删除(delete key)
} )


Object.defineProperty(Person, "name",{
value:'crazyming',
} )
// 只定义value 相当于
Object.defineProperty(Person, "name",{
value:'crazyming',
writable: false,    // 设置属性是否可写
enumerable: false,   // 设置属性是否可枚举(可用for ... in ...遍历)
configurable: false  // 设置属性是否可配置(可用defineProperty设置)及删除(delete key)
} )

通过点或者方括号定义的对象属性可以修改可以删除,使用Object.defiendProperty 定义属性可以进行更精准的控制属性,
Object.defineProperty(obj, prop, descriptor)的参数:
obj
要在其上定义属性的对象。
prop
要定义或修改的属性的名称。
descriptor
将被定义或修改的属性描述符。

返回值是 被传递给函数的对象。 在上方也就是obj对象

ES5 增加了属性描述符,可以细腻的控制属性的不同操作。属性描述符有 configurable、writable 和 enumerable。

let Person ={};
Person.name='crazy';
Person['age'] = 24;
Object.defineProperty(Person, "hobby",{
value:'唱跳rap篮球',
writable: true,    // 设置属性是否可写
enumerable: true,   // 设置属性是否可枚举(可用for ... in ...遍历)
configurable: true  // 设置属性是否可配置(可用defineProperty设置)及删除(delete key)
} )

console.log(Person) // {age: 24,name: "crazy",hobby: "唱跳rap篮球"}




对象里目前存在的属性描述符有两种主要形式:数据描述符(数据属性)存取描述符(存储器属性)~ 反正各种各样的叫法。数据描述符是一个具有值的属性,该值可能是可写的,也可能不是可写的。存取描述符是由getter-setter函数对描述的属性。描述符必须是这两种形式之一;不能同时是两者。

数据描述符特有的两个属性:
value
该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined。
writable
当且仅当该属性的writable为true时,value才能被赋值运算符改变。默认为 false。

存取描述符是由一对 getter、setter 函数功能来描述的属性:
get
一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。当访问该属性时,该方法会被执行,方法执行时没有参数传入,但是会传入this对象(由于继承关系,这里的this并不一定是定义该属性的对象)。
默认为 undefined。
set
一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。当属性值修改时,触发执行该方法。该方法将接受唯一参数,即该属性新的参数值。
默认为 undefined。

数据描述符和存取描述均具有以下描述符
configrable 描述属性是否配置,以及可否删除
enumerable 描述属性是否会出现在for in 或者 Object.keys()的遍历中


let Person = {}
let temp = null
Object.defineProperty(Person, 'name', {
  get: function () {
    return temp
  },
  set: function (val) {
    temp = val
  }
})

console.log(Person.name)//null
Person.name ="crazyming";
console.log(Person.name);//crazyming
console.log(temp);//crazyming

相关的函数:
Object.defineProperty
Object.defineProperties//批量定义属性 ,内部其实循环方式调用 Object.defineProperty
Object.getOwnPropertyDescriptor //返回该对象某属性的描述器,描述器自身是一个对象

var obj = {}

Object.defineProperty(obj, 'name', {
    value: 'ccc',
    writable: true,
    enumerable: true
})

var des = Object.getOwnPropertyDescriptor(obj, 'name')
console.log(des)//{value: "ccc", writable: true, enumerable: true, configurable: false}
2+

再次学习对象属性及Object.defineProperty()方法” 有1条评论

发表评论

电子邮件地址不会被公开。