如何理解JavaScript的属性描述符

Object.defineProperty()方法俗称属性拦截器,会直接在一个对象上定义一个新的属性,或修改一个对象现有的属性,并返回这个对象。

什么是属性描述符

创建一个对象最常用的方式是声明的形式,大概语法是这样的:

var myObj = {
  key : value
  //...
}

也可以采用构造形式,创建一个Object的实例,然后再为它添加属性和方法,大概语法如下:

var myObj = new Object();
myObj.key = value;

在上面的例子中,两种创建形式创建的myObj是一样的,都有相同的属性和方法,这些属性在创建时都带有一些特征值,JavaScript通过这些特征值来定义它们的形为。ES5在定义只有内部才用的特性时,描述了属性的各种特征。这些特性也就是属性描述符。

语法

  Object.defineProperty(obj, prop, descriptor)

属性描述符的两种形式

MDN中的描述:

对象里目前存在的属性描述符主要有两种形式:数据描述符和存取描述符。

  1. 数据描述符是一个拥有可写或不可写值的属性。
  2. 存取描述符不包含数据值,是由一对getter-setter函数功能来描述的属性。
  3. 描述符必须是两种形式之一;不能同时是两者。

参数

  obj:要在其上定义的对象

  prop:要定义或修改的属性的名称

  descriptor:将被定义或修改的属性描述符

数据描述符具有以下4个特性:

  • ** [[configurable]] ** 默认为false。当且仅当该属性的 configurable 为true时,该属性可以通过delete删除,该属性描述符才能够被改变,该属性描述符才可以被改为存取描述符。configurable主要针对属性描述符。直接在对象上定义的属性,它们的这个特性默认值为true。
  • [[enumerable]]默认为false。当且仅当该属性的 enumerable 为 true 时,该属性才能够出现在对象的枚举属性中。这样就可以通过for...in 循环返回属性。enumerable针对属性。直接在对象上定义的属性,它们的这个特性默认值为true。
  • [[value]] 默认为undefined。该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。读取属性值时,从这个位置读;写入属性值时,把新值保存在这个位置。value针对属性。
  • [[writable]] 默认为false。当且仅当该属性的 writable 为 true 时,该属性才能被赋值运算符改变。writable针对属性。直接在对象上定义的属性,它们的这个特性默认值为true。

直接在对象上定义的属性特性[[configurable]]、[[enumerable]]、[[writable]]都被设置为true,[[value]]被设置为对象该属性指定的值。
比如:

var person = {
  name : "apple"
}

这里创建了一个名为name的属性,为它指定的值是"apple"。也就是说,[[value]]特性将被设置为"apple",而针对这个值的所有修改都在这个位置上。

返回值

  被传递给函数的对象

  

金沙官网线上 1金沙官网线上 2

var o = {
    values: 'hello'
}

Object.defineProperty(o, 'key', {
    value: 9,
    writable: true,
    enumerable: true,
    configurable: true
});

console.log(o.key) // 输出结果:9

console.log(o.values)   // 输出结果:hello

Object.defineProperty(o, 'values', {
    value: 'hello world',
    writable: true,
    enumerable: true,
    configurable: true
});

console.log(o.values)   // 输出结果:hello world

View Code

存取描述符具有以下4个特性:

  • ** [[configurable]] ** 默认为false。当且仅当该属性的 configurable 为true时,该属性可以通过delete删除,该属性描述符才能够被改变,该属性描述符才可以被改为数据描述符。configurable主要针对属性描述符。直接在对象上定义的属性,它们的这个特性默认值为true。
  • [[enumerable]]默认为false。当且仅当该属性的 enumerable 为 true 时,该属性才能够出现在对象的枚举属性中。enumerable针对属性。直接在对象上定义的属性,它们的这个特性默认值为true。
  • [[get]]默认为undefined。在读取属性时调用的函数,一个给属性提供getter的方法,如果没有getter则为undefined。该方法返回值被用作属性值。
  • [[set]]默认为undefined。在写入属性时调用的函数,一个给属性提供setter的方法,如果没有setter则为undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。

属性描述符

  对象里目前存在的属性描述符有两种主要形式:数据描述符存取描述符

  数据描述符:金沙官网线上,一个具有值得属性,该值可能是可写的,也可能不是可写的。

  存取描述符:由getter和setter函数描述的属性。

  描述符必须是两者其一,不能同时是两者。

数据描述符和存取描述符4个特性的比较:

  1. 两种描述符都有[[configurable]][[enumerable]]两种属性。默认值都为false;对于直接在对象上定义的属性,默认值为true。
  2. 数据描述符另外具有[[writable]][[value]]两种属性;存取描述符另外具有[[get]][[set]]两种属性。

本文由金沙官网线上发布于Web前端,转载请注明出处:如何理解JavaScript的属性描述符

您可能还会对下面的文章感兴趣: