1. 程式人生 > >Javascript高階程式設計學習筆記(19)—— 物件屬性

Javascript高階程式設計學習筆記(19)—— 物件屬性

面向物件的語言有一個標誌,那就是語言中都有類的概念

前面的文章中我提到過ECMAScript中沒有類的概念(ES6之前)

所以JS中的物件和其他語言中的物件存在著一些區別

 

ECMA中對物件的定義如下:

無序屬性的集合,其屬性可以包含基本值、物件、或者函式

說白了JS中的物件可以看作散列表,無非就是一組名、值對

 

前面我在介紹JS中的引用型別的時候,已經介紹了物件定義的兩種方式:1、字面量 2、建構函式

這裡不再贅述

 

下面介紹一下物件上的一些屬性

 

屬性型別

ECMA中規定了兩種屬性型別:資料屬性和訪問器屬性,物件上的每個屬性都是其中的一種

這些屬性的特性不能直接訪問,只能使用ES5提供的Object.getOwnPropertyDescription(訪問的物件,訪問的屬性名)    第二個引數為字串

該方法返回一個物件,返回指定物件指定屬性的屬性描述符

 

1、資料屬性

對於這一型別的屬性有四種描述其行為的特性

  • configurable 能否通過delete刪除該屬性,或能否將其修改為訪問器屬性,預設為 true
  • enumerable 能否通過 for-in 迴圈返回該屬性 預設為 true
  • writable 能否修改屬性的值 預設為true
  • value 儲存該屬性的值 預設為undefined

要修改上述特性只能通過ES5提供的另外一個函式 Object.defineProperty(定義的物件, 屬性名, 特性描述符)

PS.要注意的是:一旦將configurable設為false就不能修改除了writable特性的其他特性了(包括configurable本身)

當對屬性進行違反其特性的操作時,會靜默地失敗,嚴格模式會報錯

 

2,、訪問器屬性

訪問器屬性沒有value特性,value特性和訪問器屬性的特性只能存在一種

訪問器屬性有以下特性

  • configurable 能否通過delete刪除該屬性,或能否將其修改為訪問器屬性,預設為 true
  • enumerable 能否通過 for-in 迴圈返回該屬性 預設為 true
  • get 定義該屬性被訪問時要執行的函式 預設undefined
  • set 定義該屬性被執行修改操作時執行的函式 預設undefined

由於get、set特性讓我們可以在資料進行操作時,執行函式,所以可以用其實現一些MVV*框架的雙向資料繫結

var obj = {values:null}; // 定義value屬性用於儲存值
Object.defineProperty(obj, data , {
   get: function(){
         return this.values; 
    },
   set: function(value){
        this.values = value;
        // 其他操作
    }  
})

其中get、set不一定要同時指定,只指定get表示該屬性只讀,只指定set表示該屬性只能寫不能讀

 

 

PS.今天就先介紹物件的屬性,要注意的是定義屬性特性和讀取屬性特性都有複數方法:getOwenPropertyDescriptions、defineProperties

除此而外上述操作只能在支援ES5的瀏覽器中執行,這也是使用訪問器屬性實現的Vue只相容到IE9的原因