如何理解JavaScript的属性描述符

什么是属性描述符

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

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

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

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

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

属性描述符的两种形式

MDN中的描述:

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

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

数据描述符具有以下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”,而针对这个值的所有修改都在这个位置上。

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

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

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

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

操作属性描述符的方法

我们在创建一个对象时,通常情况下会在对象上直接定义属性,这样生成的属性的描述符特性[[configurable]][[writable]][[enumerable]]值默认为true。我们也可以采用ES5提供的对象方法来为对象创建属性,或修改对象现有属性的描述符。下面我们就来看一下这些方法。

1. Object.defineProperty()

Object.defineProperty方法会直接在一个对象上定义一个新属性,或修改一个对象的现有属性,并返回这个对象

** 语法 **

Object.defineProperty(obj, prop, descriptor)

  • obj 需要定义属性的对象
  • prop 需要定义或修改的属性名称
  • descriptor 将被定义或修改的属性描述符对象
  • 返回值 被传给函数的对象

** 栗子 **

  1. 调用defineProperty方法添加数据描述符
var Obj = {}; // 创建一个新对象
// 对象Obj添加属性a,其值为37
Object.defineProperty(Obj, "a",{
  value: 37,
  writable: true,
  enumerable: true,
  configurable: true
});

《如何理解JavaScript的属性描述符》 image.png

  1. 调用defineProperty方法添加存取描述符
var myObj = {}; //创建一个新对象
var value;
Object.defineProperty(myObj, "b", {
  get : function(){
    return value;
  },
  set : function(newVal){
      value = newVal
  },
  enumerable : true,
  configurable : true
});
myObj.b = 38;
// 对象myObj拥有了属性b,值为38

《如何理解JavaScript的属性描述符》 image.png

  1. 数据描述符和存取描述符不能混合使用
var hisObj = {}; //创建一个新对象
Object.defineProperty(hisObj,"c",{
  value: "50",
  get: function(){
    return "50";
  }
});
// 报错

《如何理解JavaScript的属性描述符》 image.png

2. Object.defineProperties()

Object.defineProperties方法直接在一个对象上定义新的属性或修改现有属性,并返回该对象。

** 语法 **

Object.defineProperties(obj, props)

  • obj 需要添加或修改属性的对象
  • props 该对象的键值对定义对象的属性及属性相应的描述符对象
  • 返回值 被传给函数的对象

使用方法与defineProperty类似,只不过defineProperties一次性可以设置多个属性的描述符对象。

var  Obj = {
  "a":10
};
Object.defineProperties(Obj,{
  "a1":{
    get: function(){return this.a+1;},
    set: function(val){ this.a = val;}
  },
  "a2":{
    get: function(){return this.a+"test";},
    set: function(val){this.b = val}
  }
});
console.log(Obj.a1);
console.log(Obj.a2);
Obj.a1 = 3;
Obj.a2 = 'hello';
console.log(Obj.a1);
console.log(Obj.a2);

《如何理解JavaScript的属性描述符》 image.png

在使用getter和setter需要注意:如果对象指定了属性值,那么就不要针对该属性设置get和set,否则会导致堆栈溢出的报错。看下面的栗子。

var  Obj = {
  "a":10
};
Object.defineProperties(Obj,{
  "a":{
    get: function(){return this.a+1;},
    set: function(val){ this.a = val;}
  }
});
console.log(Obj.a);

《如何理解JavaScript的属性描述符》 image.png

读取属性描述符的特性

Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor() 返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)
如果属性描述符是数据描述符,返回的对象的属性有configurable, enumerable, writable, value;
如果属性描述符是存取描述符,返回的对象的属性有configurable, enumerable, writable, value。

语法

Object.getOwnPropertyDescriptor(obj, prop)

  • obj 属性所在的对象
  • prop 对象属性名称
  • 返回值 对象属性的描述符对象

** 栗子 **

var book = {};
Object.defineProperties(book,{
  _year:{
    value: 2004
  },
  edition: {
    value: 1   
   },
  year:{
    get: function(){
      return this._year;
    },
    set: function(newVal){
      if(newVal > 2004){
        this._year = newVal;
        this.edition += newVal - 2004
      }
    }
  }
});
var descriptor = Object.getOwnPropertyDescriptor(book,"_year");
console.log(descriptor.value); // 2004
console.log(descriptor.configurable); // false
console.log(typeof descriptor.get); // undefined

var descriptor1 = Object.getOwnPropertyDescriptor(book,"year");
console.log(descriptor1.value); // undefined
console.log(descriptor1.enumerable); // false
console.log(typeof descriptor1.get); // 'function'

《如何理解JavaScript的属性描述符》 image.png

参考:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties
https://segmentfault.com/a/1190000003882976

    原文作者:冰果2016
    原文地址: https://www.jianshu.com/p/19529527df80
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞