JavaScript中屬性和特性是完全不同的兩個(gè)概念，這里我將根據(jù)自己所學(xué)，來(lái)深入理解JavaScript中的屬性和特性。

主要內(nèi)容如下：

• 理解JavaScript中對(duì)象的本質(zhì)、對(duì)象與類的關(guān)系、對(duì)象與引用類型的關(guān)系
• 對(duì)象屬性如何進(jìn)行分類
• 屬性中特性的理解 
  

第一部分：理解JavaScript中對(duì)象的本質(zhì)、對(duì)象與類的關(guān)系、對(duì)象與引用類型的關(guān)系

對(duì)象的本質(zhì)：ECMA-262把對(duì)象定義為：無(wú)序?qū)傩缘募希鋵傩钥梢园局?、?duì)象或者函數(shù)。即對(duì)象是一組沒(méi)有特定順序的值，對(duì)象的每個(gè)屬性或方法都有一個(gè)名字，而這個(gè)名字都映射到一個(gè)值。故對(duì)象的本質(zhì)是一個(gè)散列表：其中是一組名值對(duì)，值可以是數(shù)據(jù)或函數(shù)。

對(duì)象和類的關(guān)系：在JavaScript中，對(duì)象和類沒(méi)有任何關(guān)系。這是因?yàn)镋CMAScript中根本就沒(méi)有類的概念，它的對(duì)象與其他基于類的語(yǔ)言中的對(duì)象是不同的。

對(duì)象和引用類型的關(guān)系：對(duì)象和引用類型并不是等價(jià)的，因?yàn)槊總€(gè)對(duì)象都是基于一個(gè)引用類型創(chuàng)建的。

第二部分：對(duì)象屬性如何進(jìn)行分類

由構(gòu)造函數(shù)或?qū)ο笞置媪糠椒▌?chuàng)建的對(duì)象中具有屬性和方法（只要提到屬性和方法，它們一定是屬于對(duì)象的；只要提到對(duì)象，它一定是具有屬性和方法的（自定義除外）），其中屬性又可分為數(shù)據(jù)屬性和訪問(wèn)器屬性，他們的區(qū)別如下：

數(shù)據(jù)屬性一般用于存儲(chǔ)數(shù)據(jù)數(shù)值，訪問(wèn)器屬性不包含數(shù)據(jù)值

訪問(wèn)器屬性多用于get/set操作

第三部分：屬性中特性的理解

ECMAScript為了描述對(duì)象屬性（property）的各種特征，定義了特性（attribute）這個(gè)概念。也就是說(shuō)特性不同于屬性，特性是為了描述屬性的。下面，我將分別講解：

• 數(shù)據(jù)屬性及其特性
• 訪問(wèn)器屬性及其特性
• 如何利用Object.defineProperties()方法定義多個(gè)特性
• 如何利用Object.getOwnPropertyDescripter()方法讀取屬性的描述符以讀取屬性的特性

1.數(shù)據(jù)屬性及其特性

剛剛我們說(shuō)過(guò)，數(shù)據(jù)屬性是用于存儲(chǔ)數(shù)據(jù)數(shù)值的，因此數(shù)據(jù)屬性具有一個(gè)數(shù)據(jù)值的位置，在這個(gè)位置可以讀取和寫(xiě)入值。數(shù)據(jù)屬性有4個(gè)描述其行為的特性，由于ECMAScript規(guī)定：在JavaScript中不能直接訪問(wèn)屬性的特性（注意：不是不能訪問(wèn)），所以我們把它放在兩組方括號(hào)中。如下：

• [[Configurable]]:默認(rèn)值為true，a、表示能否通過(guò)delete刪除屬性從而重新定義屬性 b、能否修改屬性的特性 c、能夠把屬性由數(shù)據(jù)屬性修改為訪問(wèn)器屬性
• [[Enumerable]]:默認(rèn)值為true，表示能否通過(guò)for-in循環(huán)返回該屬性(所以：如果為false，那么for-in循環(huán)沒(méi)法枚舉它所在的屬性)
  
• [[Writable]]:默認(rèn)值為true，表示能否修改屬性的值，這是與[[Configurable]]不同之處。
  
• [[Value]]:默認(rèn)值為undefined，這個(gè)值即為屬性的屬性值，我們可以在這個(gè)位置上讀取屬性值，也可以在這個(gè)位置上寫(xiě)入屬性值。
• 注意：上述的默認(rèn)是指通過(guò)構(gòu)造函數(shù)或?qū)ο笞置媪縿?chuàng)建的對(duì)象所自身?yè)碛械膶傩?，而不是下面要介紹的Object.defineProperty()方法

這些特性都具有默認(rèn)值，但是如果這些默認(rèn)值不是我們想要的，該怎么辦呢？當(dāng)然就是修改啦！我們可以通過(guò)Object.defineProperty()方法來(lái)修改屬性默認(rèn)的特性。英文difineProperty即為定義屬性的意思。這個(gè)方法接收三個(gè)參數(shù)：屬性所在的對(duì)象、屬性的名字和一個(gè)描述符對(duì)象。其中第三個(gè)參數(shù)描述符對(duì)象是對(duì)象字面量的方法創(chuàng)建的，里面的屬性和屬性值實(shí)際上保存的是要修改的特性和特性值。

下面通過(guò)幾個(gè)例子來(lái)深入理解。

a

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

這里我用對(duì)象字面量的方法創(chuàng)建了一個(gè)對(duì)象，但是沒(méi)有同時(shí)創(chuàng)建方法和屬性。而是利用了Object.defineProperty()方法來(lái)創(chuàng)建了屬性和修改了默認(rèn)值。這里將writable設(shè)置為false,于是后面我試圖修改person.name時(shí)，是無(wú)效的。

b

var person={};
Object.defineProperty(person,"name",{
  value:"zhuzhenwei"
});
console.log(person.name);//zhuzhenwei
person.name="heting";
console.log(person.name);//zhuzhenwei

注意看這個(gè)例子，這個(gè)例子中我刪去了writable:false,為什么還是不能修改呢？這是因?yàn)橹拔以诮榻B特性時(shí)，前三個(gè)默認(rèn)為ture，是在創(chuàng)建對(duì)象并創(chuàng)建屬性的情況下得到的。對(duì)于通過(guò)調(diào)用Object.defineProperty()方法創(chuàng)建的屬性，其前三個(gè)特性的默認(rèn)值均為false，這里需要注意。

c

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

這里我們將新建的屬性name的特性設(shè)置為了configurable:false;因此下面刪除屬性的操作是無(wú)效的。根據(jù)b，可知configurable,默認(rèn)就是false，即使去掉也不可修改。

d

var person={};
Object.defineProperty(person,"name",{
  value:"zhuzhenwei",
  configurable:true
});
console.log(person.name);//zhuzhenwei
delete person.name;
console.log(person.name);//undefined　　

在這里我將默認(rèn)的configurable的值由默認(rèn)的false修改為了true，于是變成了可配置的，那么最后就成功刪除了。

e

var person={};
Object.defineProperty(person,"name",{
  value:"zhuzhenwei",
  configurable:false
});
console.log(person.name);//zhuzhenwei
Object.defineProperty(person,"name",{
  value:"zhuzhenwei",
  configurable:true
});
console.log(person.name);//Uncaught TypeError: Cannot redefine property: name(…)

如果之前已經(jīng)設(shè)置成為了false，那么后面再改成true也是徒勞的，即：一旦把屬性設(shè)置成為不可配置的，就不能再把它變回可配置了。

f

console.log(person.name);//Uncaught TypeError: Cannot redefine property: name(…)
var person={};
Object.defineProperty(person,"name",{
  value:"zhuzhenwei",
});
console.log(person.name);//zhuzhenwei
Object.defineProperty(person,"name",{
  value:"zhuzhenwei",
  configurable:true
});
console.log(person.name);//Uncaught TypeError: Cannot redefine property: name(…)

這里可以說(shuō)明，即使前一步我們不管默認(rèn)的configurable:false,后面得到的仍是不可配置。于是，可以得出結(jié)論，為了可配置，必須在第一次調(diào)用Object.defineProperty()函數(shù)時(shí)就將默認(rèn)的值修改為true。

2.訪問(wèn)器屬性及其特性　　

之前提到，訪問(wèn)器屬性不包含數(shù)據(jù)值，他們包含一對(duì)getter函數(shù)和setter函數(shù)（這兩個(gè)函數(shù)不是必須的）。在讀取訪問(wèn)器屬性時(shí)，會(huì)調(diào)用getter函數(shù)，這個(gè)函數(shù)負(fù)責(zé)返回有效的值；在寫(xiě)入訪問(wèn)器屬性是，會(huì)調(diào)用setter函數(shù)并傳入新值，這個(gè)函數(shù)負(fù)責(zé)決定如何處理數(shù)據(jù)。同樣，由于不能通過(guò)JavaScript來(lái)直接訪問(wèn)得到訪問(wèn)器屬性的特性，所以下面列出的特性將由[[]]括起來(lái)以作區(qū)分。

• [[Configurable]]:默認(rèn)值為true，a、表示能否通過(guò)delete刪除屬性從而重新定義屬性 b、能否修改屬性的特性 c、能夠把屬性由訪問(wèn)器屬性修改為數(shù)據(jù)屬性
• [[Enumerable]]:默認(rèn)值為true，表示能否通過(guò)for-in循環(huán)返回該屬性(所以：如果為false，那么for-in循環(huán)沒(méi)法枚舉它所在的屬性)
  
• [[Get]]：在讀取屬性時(shí)調(diào)用的函數(shù)。默認(rèn)值為undefined  關(guān)鍵：特性可以是一個(gè)函數(shù)
  
• [[Set]]:  在寫(xiě)入屬性時(shí)調(diào)用的函數(shù)。默認(rèn)值為undefined　關(guān)鍵：特性可以是一個(gè)函數(shù) 由于get和set函數(shù)也屬于屬性的特性，那么他們就有可能（說(shuō)有可能是因?yàn)檫@兩個(gè)函數(shù)也不是必須的）出現(xiàn)在Object.defineproperty的第三個(gè)參數(shù)描述符對(duì)象的屬性中。

注意：1.相對(duì)于數(shù)據(jù)屬性，我們發(fā)現(xiàn)訪問(wèn)器屬性中沒(méi)有writable特性和value特性。這是因?yàn)樵L問(wèn)器屬性不包含數(shù)據(jù)值，那么我們?cè)趺串?dāng)然就不可修改屬性的值（用不到writable特性），更不用考慮value了。

　　　2.訪問(wèn)器屬性不能直接定義，必須是用Object.defineProperty()來(lái)定義。（通過(guò)這個(gè)規(guī)定我們就能準(zhǔn)確地判斷出訪問(wèn)器屬性和數(shù)據(jù)屬性了）

通過(guò)下面這個(gè)例子來(lái)深入理解：

var book={
  _year:2004,
  edition:1
};
Object.defineProperty(book,"year",{
  get:function(){<br>　　　　　　　　　　　　return this._year;
  },
  set:function(newValue){
    if(newValue>2004){
      this._year=newValue;
      this.edition+=newValue-2004;
    }
  }
});
book.year=2005;
console.log(book.edition);//2

幾個(gè)需要深入理解的地方：

• 訪問(wèn)器屬性不能直接定義，必須使用Object.defineProperty()來(lái)定義，且該屬性具有set和ger特性，于是可以判斷，_year和edition是數(shù)據(jù)屬性，而year是訪問(wèn)器屬性。
• 我們看到_year這個(gè)數(shù)據(jù)屬性前面是以_(下劃線)開(kāi)頭的，這個(gè)一種常用的記號(hào)，用于表示只能通過(guò)對(duì)象方法訪問(wèn)的屬性。從上面的例子中可以看到get相當(dāng)于描述符對(duì)象的一個(gè)方法，而_year正是在這個(gè)對(duì)象方法訪問(wèn)的屬性。而edition既可以通過(guò)對(duì)象方法訪問(wèn)，也可以由對(duì)象直接訪問(wèn)。
• book.year表示正在讀取訪問(wèn)器屬性，這時(shí)會(huì)調(diào)用get函數(shù)，并返回了2004這個(gè)有效的值。
• book.year=2005表示寫(xiě)入訪問(wèn)器屬性，這時(shí)會(huì)調(diào)用set函數(shù)并傳入新值，即將2005傳給newValue，這個(gè)函數(shù)決定如何處理數(shù)據(jù)。
• 這時(shí)使用訪問(wèn)器屬性的常見(jiàn)方法-即設(shè)置一個(gè)屬性的值會(huì)導(dǎo)致其他屬性發(fā)生變化。
  

3.如何利用Object.defineProperties()方法定義多個(gè)特性

顯然，一個(gè)對(duì)象不可能只具有一個(gè)屬性，因此，定義多個(gè)屬性的可能性很大，于是JavaScript提供了Object.defineProperties()方法解決這個(gè)問(wèn)題。這個(gè)方法接收兩個(gè)參數(shù)，第一個(gè)是要定義屬性所在的對(duì)象，第二個(gè)是一個(gè)對(duì)象字面量方法創(chuàng)建的對(duì)象，對(duì)象的屬性名即為要定義的特姓名，對(duì)象的屬性值又是一個(gè)對(duì)象，這個(gè)對(duì)象里的屬性名和屬性值分別是特性名和特性值（這里不是很好理解，看例子即可）。

var book={};
Object.defineProperties(book,{
  _year:{
    writable:true，
    value:2004
  },
  edition:{
    writable:true,
    value:1
  },
  year:{
    get:function(){
      return this._year;
    },
    set:function(){
      if(newValue>2004){
        this._year=newValue;
        this.edition+=newValue-2004;
      }
    }
  }
});　

4.如何利用Object.getOwnPropertyDescripter()方法讀取屬性的描述符以讀取屬性的特性

　　我們可以使用Object.getOwnPropertyDescripter()方法來(lái)取得給定屬性的描述符。getOwnPropertyDescripter即為取得自身屬性描述符的意思。這個(gè)方法接收兩個(gè)參數(shù)：屬性所在的對(duì)象要要讀取其描述符的屬性名稱。返回一個(gè)對(duì)象。

　　對(duì)于訪問(wèn)器屬性而言，這個(gè)對(duì)象的屬性有configurable、enumerable、get和set；

　　對(duì)于數(shù)據(jù)屬性而言，這個(gè)對(duì)象的屬性有configurable、enumerable、writable和value。

var book={};
Object.defineProperties(book,{
  _year:{
    value:2004
  },
  edition:{
    value:1
  },
  year:{
    get:function(){
      return this._year;
    },
    set:function(){
      if(newValue>2004){
        this._year=newValue;
        this.edition+=newValue-2004;
      }
    }
  }
});
var descriptor=Object.getOwnPropertyDescriptor(book,"_year");
console.log(descriptor.value);//2004
console.log(descriptor.configurable);//false 因?yàn)橥ㄟ^(guò)Object.defineProperties()方法創(chuàng)建的屬性的特性configurable enumerable都是false
console.log(typeof descriptor.get);//undefined 注意：這是數(shù)據(jù)屬性，是不具有g(shù)et特性的
var descriptor=Object.getOwnPropertyDescriptor(book,"year");
console.log(descriptor.value);//undefined
console.log(descriptor.enumerable);//false
console.log(typeof descriptor.get);//function get雖然是屬性的一個(gè)特性，但是它也是函數(shù)。

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，同時(shí)也希望多多支持腳本之家！

最新評(píng)論