在JavaScript中對(duì)象被定義為"無(wú)序?qū)傩缘募?，其屬性可以包含基本值、?duì)象或函數(shù)。"通俗點(diǎn)講，我們可以把對(duì)象理解為一組一組的名值對(duì)，其中值可以是數(shù)據(jù)或函數(shù)。

創(chuàng)建自定義對(duì)象通常有兩種方法，第一種就是創(chuàng)建一個(gè)Object的實(shí)例，然后再為其添加屬性和方法，例如：

var person = new Object(); 
person.name = "Scott"; 
person.age = 24; 
person.sayName = function(){ 
  alert(person.name); 
} 

第二種方法即對(duì)象字面量法，一般推薦使用這種方法創(chuàng)建對(duì)象，例如:

var person = { 
  name: "Scott", 
  age: 24, 
  sayName: function(){ 
     alert(this.name);  
  } 
} 

屬性類型

JavaScript中定義了兩種不同的屬性：數(shù)據(jù)屬性和訪問器屬性。數(shù)據(jù)屬性一般用于存儲(chǔ)數(shù)據(jù)數(shù)值，而訪問器屬性一般進(jìn)行g(shù)et/set操作，不能直接存儲(chǔ)數(shù)據(jù)數(shù)值。在ES5中，我們?yōu)榱嗣枋鰧傩?property)的各種特征，定義了特性(attribute)。在JavaScript中不能直接訪問特性，我們把它放在兩對(duì)方括號(hào)中，例如[[Enumerable]]。

•數(shù)據(jù)屬性

數(shù)據(jù)屬性主要有四個(gè)特性描述其行為：

1.[[Configurable]]：默認(rèn)為true。表示能否通過delete刪除屬性從而重新定義屬性，能否修改屬性特性，或者能否把屬性修改為訪問器屬性；

2.[[Enumerable]]：默認(rèn)為true。表示能否通過for-in循環(huán)返回屬性；

3.[[Writable]]：默認(rèn)為true。表示能否修改屬性的值。

4.[[Value]]：默認(rèn)值為undefined。表示包含屬性的數(shù)據(jù)值。讀寫屬性值都從這個(gè)位置進(jìn)行。

對(duì)于上面直接在person對(duì)象上定義的屬性，它們的[[Configurable]]、[[Enumerable]]、[[Writable]]特性都被默認(rèn)設(shè)置為true，而[[Value]]特性被設(shè)置為特定值。如果想要修改屬性默認(rèn)的特性，可以使用ES5提供的Object.defineProperty()方法，這個(gè)方法接收三個(gè)參數(shù)：屬性所在對(duì)象、屬性的名字和一個(gè)描述符對(duì)象。描述符對(duì)象只能包含上述四個(gè)特性的一個(gè)或多個(gè)。例子如下：

var person = { 
  name: "Scott"
} 
Object.defineProperty(person,"name",{ 
  writable:false; 
}) 
 
console.log(person.name);  //"Scott" 
person.name = "Evan"; 
console.log(person.name);  //"Scott"

將person對(duì)象name屬性的特性writable設(shè)置為false，此屬性的值為不可修改的，因此對(duì)該屬性的復(fù)制操作會(huì)直接忽略。

var person = { 
  name: "Scott"
} 
Object.defineProperty(person,"name",{ 
  configurable:false; 
}) 
 
console.log(person.name);  //"Scott" 
delete person.name; 
console.log(person.name);  //"Scott" 

可以看到，當(dāng)把name屬性的特性值configurable設(shè)置為false之后，就表示不能從對(duì)象中刪除屬性。但需要注意的是，當(dāng)把屬性定義為不可配置之后，就不能把它變回可配置的了。此時(shí)修改除writable之外的其它特性都會(huì)報(bào)錯(cuò)，例如：

var person = { 
  name: "Scott"
} 
Object.defineProperty(person,"name",{ 
  configurable:false; 
}) 

Object.defineProperty(person,"name",{ 
  configurable:true;  //此處會(huì)拋出錯(cuò)誤 
}) 

也就是說，在把configurable特性修改為false之后，再修改其它特性就會(huì)有限制存在。

•訪問器屬性

訪問器屬性不包含數(shù)據(jù)值。它包含一對(duì)getter和setter函數(shù)。當(dāng)讀取訪問器屬性時(shí)，會(huì)調(diào)用getter函數(shù)并返回有效值；當(dāng)寫入訪問器屬性時(shí)，會(huì)調(diào)用setter函數(shù)并傳入新值，setter函數(shù)負(fù)責(zé)處理數(shù)據(jù)。該屬性有四個(gè)特性：

1.[[Configurable]]：默認(rèn)為true。表示能否通過delete刪除屬性從而重新定義屬性，能否修改屬性特性，或者能否把屬性修改為訪問器屬性；

2.[[Enumerable]]：默認(rèn)為true。表示能否通過for-in循環(huán)返回屬性；

3.[[Get]]：讀取屬性時(shí)調(diào)用的函數(shù)，默認(rèn)為undefined；

4.[[Set]]：寫入屬性時(shí)調(diào)用的函數(shù)，默認(rèn)為undefined。

訪問器屬性不能直接定義，必須通過Object.defineProperty()函數(shù)定義，例如：

var person = { 
  _name: "Scott", 
  _age: 24, 
  _tel: 86247 
}; 
//name屬性為只讀的 
Object.defineProperty(person,"name",{ 
  get: function(){ 
    return this._name; 
  } 
}); 
//age屬性為只寫不可讀的 
Object.defineProperty(person,"age",{ 
  set: function(p){ 
     this._age = p; 
  } 
}); 
//tel屬性為可讀可寫的 
Object.defineProperty(person,"tel",{ 
  get:function(){ 
     return this._tel; 
  }, 
  set: function(p){ 
     this._tel = p; 
  } 
}); 
console.log(person.name);  //"Scott" 
person.name = "Evan"; 
console.log(person.name);  //"Scott"，對(duì)name屬性的修改無(wú)效 
console.log(person.age);  //undefined，不可讀屬性 
person.age = 25; 
console.log(person._age);  //25，已經(jīng)修改 
console.log(person.tel);  //"86247"，可讀屬性 
person.tel = "13975"; 
console.log(person.tel);  //"13975"，可以修改

屬性前面的下劃線表示只能通過對(duì)象方法訪問的屬性。當(dāng)我們使用person.name時(shí)實(shí)際上調(diào)用的是name屬性的getter函數(shù)，為person.name賦值時(shí)調(diào)用的是name屬性的setter函數(shù)，這樣屬性和訪問器之間的關(guān)系就很清晰了。

定義多個(gè)屬性

實(shí)際上ES5為我們提供了為一個(gè)對(duì)象定義多個(gè)屬性的方法，即Object.defineProperties()，該函數(shù)接收兩個(gè)參數(shù)，屬性所在的對(duì)象以及需要修改的屬性及其描述符對(duì)象組成的對(duì)象，例如把上邊的例子修改為一次性定義多個(gè)屬性，如下：

var person = { 
  _name: "Scott", 
  _age: 24, 
  _tel: 86247 
}; 
Object.defineProperties(person,{ 
  name:{ 
    get: function(){ 
      return this._name; 
    } 
  }, 
  age:{ 
    set: function(p){ 
      this._age = p; 
    } 
  }, 
  tel:{ 
    get:function(){ 
      return this._tel; 
    }, 
    set: function(p){ 
      this._tel = p; 
    } 
  } 
});

讀取屬性的特性

ES5提供了Object.getOwnPropertyDescripter()方法來(lái)獲取給定屬性的描述符。該方法接收兩個(gè)參數(shù)：屬性所在的對(duì)象和要讀取其描述符的屬性名稱。結(jié)果會(huì)返回一個(gè)對(duì)象，如果是訪問器屬性，返回的對(duì)象有configuable、enumerable、get和set；如果是數(shù)據(jù)屬性，這個(gè)返回對(duì)象的屬性包括configuable、enumerable、writable和value。對(duì)于上面的例如，使用如下：

var person = { 
  _name: "Scott", 
  _age: 24, 
  _tel: 86247 
}; 
Object.defineProperties(person,{ 
  name:{ 
    get: function(){ 
      return this._name; 
    } 
  }, 
  age:{ 
    set: function(p){ 
      this._age = p; 
    } 
  }, 
  tel:{ 
    get:function(){ 
      return this._tel; 
    }, 
    set: function(p){ 
      this._tel = p; 
    } 
  } 
}); 
var descripter = Object.getOwnPropertyDescripter(person,"tel"); 
console.log(descripter.value);  //undefined 
console.log(descripter.enumerable);  //false 
console.log(typeof descripter.get);  //"function"

上面的代碼中獲取了person對(duì)象的tel屬性，由于其是一個(gè)訪問器屬性，所以其value為undefined，enumerable為false，而get為指向getter函數(shù)的一個(gè)指針。

以上這篇淺談JavaScript 數(shù)據(jù)屬性和訪問器屬性就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論