屬性描述對(duì)象

JavaScript其實(shí)支持多種編程范式的，包括函數(shù)式編程和面向?qū)ο缶幊蹋?/p>

• JavaScript沖的對(duì)象被設(shè)計(jì)為一組屬性無(wú)序集合，像是一個(gè)嘻哈表，由key和value組成；
• key是一個(gè)標(biāo)識(shí)符名稱，value可以是任意類型，也可以是其他對(duì)象或者函數(shù)類型；
• 如果值是一個(gè)函數(shù)，那么我們可以稱之為對(duì)象的方法。

所以，屬性描述對(duì)象的概念就為：JavaScript提供了一個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)，用來(lái)描述對(duì)象的屬性，控制它的行為，比如該屬性是否可寫、可遍歷等等。這個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)稱為“屬性描述對(duì)象”（attributes object）。每個(gè)屬性都有自己對(duì)應(yīng)的屬性描述對(duì)象，保存該屬性的一些元信息。

下面是屬性描述對(duì)象的一個(gè)例子。

{
    value:123,
    writable:false,
    enumerable:true,
    configurable:false,
    get:undefined,
    set:undefined
}    

屬性描述對(duì)象提供六個(gè)元屬性。

• value：value是該屬性的屬性值，默認(rèn)為undefined。
• writable：writable是一個(gè)布爾值，表示屬性值（value）是否可改變（即是否可改寫），默認(rèn)為true。
• enumerable：enumerable是一個(gè)布爾值，表示該屬性是否可遍歷，默認(rèn)為true。如果設(shè)為false，會(huì)使得某些操作（比如for...in循環(huán)、Object.keys()）跳過(guò)該屬性。
• configurable：configurable是一個(gè)布爾值，表示可配置性，默認(rèn)為true。如果設(shè)為false，將阻止某些操作改寫屬性，比如無(wú)法刪除該屬性，也不得改變?cè)搶傩缘膶傩悦枋鰧?duì)象（value屬性除外）。也就是說(shuō)，configurable屬性控制了屬性描述對(duì)象的可寫性。
• get：get是一個(gè)函數(shù)，表示該屬性的取值函數(shù)（getter），默認(rèn)為undefined。
• set：set是一個(gè)函數(shù)，表示該屬性的存值函數(shù)（setter），默認(rèn)為undefined。

Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor()方法可以獲取屬性描述對(duì)象。他的第一個(gè)參數(shù)是目標(biāo)對(duì)象，第二個(gè)參數(shù)是一個(gè)字符串，對(duì)應(yīng)目標(biāo)對(duì)象的某個(gè)屬性名。

var obj = (p:'a'};

Object.getOwnPropertyDescriptor(obj,'p')
//Object{ value:"a",
//       writable:true,
//       enumerable:true,
//       configurable:true
  }        

上面代碼中，Object.getOwnPropertyDescriptor()方法獲取obj.p的屬性描述對(duì)象。

注意，Object.getOwnPropertyDescriptor()方法只能用于對(duì)象自身的屬性，不能用于繼承的屬性。

var obj = {p:'a');

Object.getOwnPropertyDescriptor(obj,'toStrng')
//undefined

上面代碼中，toString是obj對(duì)象繼承的屬性，Object.getOwnPropertyDescriptor()無(wú)法獲取。

Object.getOwnPropertyNames()

Object.getOwnPropertyNames方法返回一個(gè)數(shù)組，成員是參數(shù)對(duì)象自身的全部屬性的屬性名，不管該屬性是否可遍歷。

var obj = Object.defineProperties({},{
    p1:{value:1,enumerable:true},
    p2:{value:2,enumerable:false}
});

Object.getOwnPropertyNames(obj)
//["p1","p2"]

上面代碼中，obj.p1是可遍歷的，obj.p2是不可遍歷的。Object.getOwnPropertyNames會(huì)將它們都返回。

這跟Object.keys的行為不同，Object.keys只返回對(duì)象自身的可遍歷屬性的全部屬性名。

Object.keys([])//[]
Object.getOwnPropertyNmaes([])//['length']

Object.keys(Object.prototype)// []
Object.getOwnPropertyNames(Object.prototype)
//['hasOwmProperty'
//   'valueOf',
//   'constructor',
//   'toLocaleString',
//   'isPrototypeOf',
//   'propertyIsEnumerable',
//   'toString']

上面代碼中，數(shù)組自身的length屬性是不可遍歷的，Object.keys不會(huì)返回該屬性。第二個(gè)例子Object.prototype也是一個(gè)對(duì)象，所有實(shí)例對(duì)象都會(huì)繼承它，它自身的屬性都是不可遍歷的。

Object.defineProperty()，Object.defineProperties()

Object.defineProperty()方法允許通過(guò)屬性描述對(duì)象，定義或修改一個(gè)屬性，然后返回修改后的對(duì)象，它的用法如下。

Object.defineProperty(object,propertyName,attributesObject)

Object.defineProperty方法接受三個(gè)參數(shù)，依次如下。

• object：屬性所在的對(duì)象
• propertyName：字符串，表示屬性名
• attributesObject：屬性描述對(duì)象

舉例來(lái)說(shuō)，定義obj.p可以寫成下面這樣。

var obj = Object.defineProperty({},'p',{
    value:123,
    writable:false,
    enumerable:true,
    configurable:false
});

obj.p //123

obj.p = 246;
obj.p //123

上面代碼中，Object.defineProperty()方法定義了obj.p屬性。由于屬性描述對(duì)象的writable屬性為false，所以obj.p屬性不可寫。注意，這里的Object.defineProperty方法的第一個(gè)參數(shù)是{}（一個(gè)新建的空對(duì)象），p屬性直接定義在這個(gè)空對(duì)象上面，然后返回這個(gè)對(duì)象，這是Object.defineProperty()的常見(jiàn)用法。

如果屬性已經(jīng)存在，Object.defineProperty()方法相當(dāng)于更新該屬性的屬性描述對(duì)象。

如果一次性定義或修改多個(gè)屬性，可以使用Object.defineProperties()方法。

var obj = Object.defineProperties({},{
    p1:{value:123,enumerable:true},
    p2:{value:'abc',enumerable:true},
    p3:{get:function(){return this.p1 + this.p2},
       enumerable:true,
       configurable:true
      }
  });
  
  obj.p1 //123
  obj.p2 //"abc"
  obj.p3 //"123abc"

上面代碼中，Object.defineProperties()同時(shí)定義了obj對(duì)象的三個(gè)屬性。其中，p3屬性定義了取值函數(shù)get，即每次讀取該屬性，都會(huì)調(diào)用這個(gè)取值函數(shù)。

注意，一旦定義了取值函數(shù)get（或存值函數(shù)set），就不能將writable屬性設(shè)為true，或者同時(shí)定義value屬性，否則會(huì)報(bào)錯(cuò)。

var obj = {};

Object.defineProperty(obj,'p',{
    value:123,
    get:function(){return 456;}
});
//TypeError: Invalid property.
// A property cannot both have accessors and be writable or have a value

Object.defineProperty(obj,'p'{
    writable:true,
    get:function(){return 456;}
});
// TypeError: Invalid property descriptor.
// Cannot both specify accessors and a value or writable attribute

上面代碼中，同時(shí)定義了get屬性和value屬性，以及將writable屬性設(shè)為true，就會(huì)報(bào)錯(cuò)。

Object.defineProperty()和Object.defineProperties()參數(shù)里面的屬性描述對(duì)象，writable、configurable、enumerable這三個(gè)屬性的默認(rèn)值都為false。

var obj = {};
Object.defineProperty(obj,'foo',{});
Object.getOwnPropertyDescriptor(obj,'foo')
//{
//    value:undefined,
//    writable:false,
//    enumerable:false,
//    configurable:false
//}

上面代碼中，定義obj.foo時(shí)用了一個(gè)空的屬性描述對(duì)象，就可以看到各個(gè)元屬性的默認(rèn)值。

Object.prototype.propertyIsEnumerable()

實(shí)例對(duì)象的propertyIsEnumerable()方法返回一個(gè)布爾值，用來(lái)判斷某個(gè)屬性是否可遍歷。注意，這個(gè)方法只能用于判斷對(duì)象自身的屬性，對(duì)于繼承的屬性一律返回false。

var obj = {};
obj.p = 123;

obj.propertyIsEnumerable('p') //true
obj.propertyIsEnumerable('toString') //false

上面代碼中，obj.p是可遍歷的，而obj.toString是繼承的屬性。

到此這篇關(guān)于你必須了解的JavaScript中的屬性描述對(duì)象詳解(上)的文章就介紹到這了,更多相關(guān)JavaScript屬性描述對(duì)象內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論