js進階程式設計——資料屬性和訪問器屬性

標籤：log   預設值   通過   obj   des   迴圈   return   logs   刪除   

ES5中對象的屬性可以分為“資料屬性”和“訪問器屬性”兩種。

資料屬性一般用於儲存資料數值，訪問器屬性對應的是set/get操作，不能直接儲存資料值。

資料屬性分為 configurable   enumerable writable value

解釋：configurable： 表示能否通過delete刪除屬性重而重新定義屬性，能否修改屬性的特性，或者能否把屬性修改為訪問器屬性。

　　enumerable：表示能否通過for-in迴圈返回屬性。

　　writable：表示能否修改屬性的值。

　　value：包含這個屬性的資料值。讀取屬性值的時候，從這個位置度，寫入屬性值的時候把新值儲存在這個位置。這個特性的預設值為undefined

對於直接在對象上定義的屬性，它們的[[configurable]] [[enumerable]] [[writable]] 特性都被設定為true　　value則被設定成指定的值。

例子：

1 var person = {2     name:"Nicholas"      3 };

person對象的configurable   enumerable writable都是預設值都為true

訪問器屬性特性：set、get、enumerable、configurable。

　解釋：configurable：true/false，是否可以通過delete刪除屬性，能否修改屬性的特性，能否把屬性修改為訪問器屬性，預設false；

　　　　　　　　enumerable：true/false，是否可以通過for in迴圈返回，預設false；

　　　　　　　　set：function，讀取屬性值時調用的函數；

　　　　　　　　get：function，修改屬性值時調用的函數。

將屬性添加到對象或修改現有屬性的特性使用Object.defineProperty() 或 Object.defineproperties()方法;

　　　　Object.defineProperty(object, propertyname, descriptor):

　　　　參數解釋：object：需要添加或修改屬性的對象；

　　　　　　　　　propertyname：屬性的名稱，字串格式；

　　　　　　　　　descriptor：屬性的描述，設定資料屬性或訪問器屬性的特性。

 

　　執行個體分析：

　　資料屬性：

　　　　var emp = {

　　　　　　name:‘tom‘

　　　　};

 

　　　　Object.defineProperty(emp,‘name‘,{

　　　　　　writable:false

　　　　});

　　　　emp.name = ‘jery‘;
　　　　console.log(emp.name);//輸出tom，因為已經設定了writable為false

　　　　　　

　　　　Object.defineProperty(emp,‘age‘,{

　　　　　　configurable:false,

　　　　　　writable:true,

　　　　　　value:22

　　　　});

　　　　console.log(emp.age);//輸出22，因為設定了value為22

　　　　emp.age = 25;

　　　　console.log(emp.age);//輸出25，設定了writable為true

　　　　delete emp.age;

　　　　console.log(emp.age);//輸出25，設定了configurable為false，此屬性刪除不了

 

　　訪問器屬性：

　　　　var emp ={

　　　　　　_name:‘tom‘,

　　　　　　_age:20

　　　　};

　　　　

　　　　Object.defineProperty(emp,‘name‘,{

　　　　　　get:function(){

　　　　　　　　　　return this._name;

　　　　　　　　}

　　　　});

　　　　console.log(emp.name);//輸出tom，由get方法返回_name的值

　　　　emp.name = ‘jery‘;

　　　　console.log(emp.name);//輸出tom，沒有set方法，修改不了_name的值　

 

　　　　Object.defineProperty(emp,‘age‘,{

　　　　　　configurable:true,

　　　　　　get:function(){

 　　　　　　　return this._age;

　　　　　　}

　　　　　　set:function(age){

　　　　　　　　this._age = age;

　　　　　　}

　　　　});

　　　　emp.age = 25;　　
　　　　console.log(emp.age)//輸出25，emp.age=25是使用set方法將25賦值給_age，emp.age是使用get方法將_age的讀取出來

　　　　delete emp.age;

　　　　console.log(emp.age);//輸出undefined，configurable為true，可以使用delete方法將emp.age屬性刪除

 

　　備忘：訪問器屬性可以起到很好的保護作用，當只有get方法時，就實現唯讀不能寫；反之，只有set時，便是只能寫入而不能讀取

 

js進階程式設計——資料屬性和訪問器屬性