如何理解JavaScript的属性描述符

2017-04-13 本文已影响321人冰果2016

什么是属性描述符

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

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

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

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

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

属性描述符的两种形式

MDN中的描述：

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

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

数据描述符具有以下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个特性的比较：

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

操作属性描述符的方法

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

1. Object.defineProperty()

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

** 语法 **

Object.defineProperty(obj, prop, descriptor)

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

** 栗子 **

调用defineProperty方法添加数据描述符

var Obj = {}; // 创建一个新对象
// 对象Obj添加属性a，其值为37
Object.defineProperty(Obj, "a",{
  value: 37,
  writable: true,
  enumerable: true,
  configurable: true
});

image.png

调用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

image.png

数据描述符和存取描述符不能混合使用

var hisObj = {}; //创建一个新对象
Object.defineProperty(hisObj,"c",{
  value: "50",
  get: function(){
    return "50";
  }
});
// 报错

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

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

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'

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

如何理解JavaScript的属性描述符

什么是属性描述符

属性描述符的两种形式

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

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

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

操作属性描述符的方法

1. Object.defineProperty()

2. Object.defineProperties()

读取属性描述符的特性

Object.getOwnPropertyDescriptor()

猜你喜欢

热点阅读