JavaScript數據屬性與訪問器屬性


  ES5中對象的屬性可以分為‘數據屬性’和‘訪問器屬性’兩種。

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

 

  數據屬性特性:value、writable、enumerable、configurable。

    解釋:configurable:true/false,是否可以通過delete刪除屬性,能否修改屬性的特性,能否把屬性修改為訪問器屬性,默認false;

       enumerable:true/false,是否可以通過for in循環返回,默認false;

       writable:true/false,是否可以修改屬性的值,默認false;

       value:undefined,設置屬性的值,默認undefined。

 

   訪問器屬性特性: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時,便是只能寫入而不能讀取


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM