JavaScript ES5之Object.create函數詳解

介紹

在建立對象的時候,咱們有2種經常使用方法javascript

一個是文本標記法(var obj = {}),一種是運用Object函數進行對象的建立(new Object()).java

可是這兩種方式並非建立的一個完徹底全"乾乾淨淨"的對象,這裏的乾淨只得是沒有繼承鏈.瀏覽器

幸運的是,ES5爲咱們提供了一種建立徹底"乾淨"的對象的方法,Object.create函數,接下我將向你們介紹Object.create的詳細使用函數

語法

javascriptObject.create(proto, [ propertiesObject ]);

參數介紹

proto測試

一個對象,做爲新建立對象的原型。若是 proto 參數不是 null 或一個對象值,則拋出一個 TypeError 異常。null表示沒有原型對象(這樣就建立了一個"乾淨的對象")this

propertiesObjectprototype

一個對象值,能夠包含若干個屬性,屬性名爲新建對象的屬性名,屬性值爲那個屬性的屬性描述符對象.(屬性將作簡單介紹,後面將詳細解答)code

  • value: 設置屬性的值
  • writable: 布爾值,設置屬性是否能夠被重寫,默認屬性值爲false(不能被重寫)
  • enumerable: 布爾值,設置屬性是否能夠被枚舉,默認屬性值爲false(不能被枚舉)
  • configurable: 布爾值,設置屬性是否能夠被刪除,默認屬性值爲false(不能被刪除)
  • get: 函數,設置屬性返回結果(後面解答)
  • set: 函數,有一個參數(後面解答)

詳細使用

光看概念其實開始我也很暈 (@﹏@)~,都是實踐出真章,OK! ~如今開始~對象

簡單對象建立

繼續上面的建立"乾淨"的對象,咱們能夠這麼作:繼承

javascriptvar clearObj = Object.create(null);
   //Object with no prototype

如今我想建立一個銀行帳戶對象,佔時關注它是哪一個銀行的

javascriptvar account = Object.create(Object.prototype,{
   type: {
       value: "建設銀行"
       //enumerable: false
       //configurable: false
       //writable: false
   }
   });
   account.type; // "建設銀行"
 
 

writable屬性使用

繼續上面的例子,有好奇的同窗可能已經發現了,上面的例子中,咱們作一下操做:

javascriptaccount.type = "人民銀行"; //"人民銀行"
       account.type; // "建設銀行"

MD,真是日了狗了,這是怎麼回事?別急,這就是writable屬性惹得貨,若是咱們將屬性設置爲true

javascriptaccount.type = "人民銀行"; //"人民銀行"
       account.type; // "人民銀行"

configurable屬性使用

仍是上面的例子,忽然,我不想要account對象的type屬性了,天然的咱們會想到

javascriptdelete account.type // false

我去!!!刪都不讓我刪!? 別急,此次是configurable屬性的問題,若是咱們將它設置爲true

javascriptaccount.type; // "建設銀行"
       delete account.type // true
       account.type; // undefined

enumerable屬性值

如今我要遍歷account對象

javascriptfor(var i in account){
           console.log(account[i]);
       }
       // undefined

沒有結果!?type屬性去哪了!?我知道你們都很聰明,此次確定是enumerable屬性值惹得禍,若是enumerable屬性設置爲true

javascriptfor(var i in account){
           console.log(account[i]);
       }
       // "建設銀行"

get和set的用法

如今我須要個人account對象有另一個屬性:帳戶號碼,我須要若是修改了給出特定格式,沒有帳戶須要給出警告

javascriptvar account = Object.create(Object.prototype,{
?            type: {
               value: "建設銀行",
               enumerable: true,
               configurable: false, // 不能被刪除
               writable: false // 不能被修改
           },
           number: {
               get: function(){
                   if((typeof number) === "undefined"){
                       //說明沒有設置number
                       return "您尚未開通帳戶!請聯繫前臺!";
                   }
                   return "您的帳戶號碼是:"+number;
               },
               set: function(num){
                   number = num;
                   if(this.cTime === 0){
                       console.log("帳戶開通成功!");
                       this.cTime++;
                   }else{
                       console.log("帳戶號碼已經被修改!");
                   }
               }
           },
           cTime: {
               value: 0,
               writable: true
           }
       });
       account.type; // "建設銀行"
       account.number; // "您尚未開通帳戶!請聯繫前臺!"
       account.number = "610XXXXXXXXXX21";
       // "帳戶開通成功!"
       account.number; // "您的帳戶號碼是:610XXXXXXXXXX21"
       account.number = "610XXXXXXXXXX88";
       // "帳戶號碼已經被修改!"
       account.number; // "您的帳戶號碼是:610XXXXXXXXXX88"

注意

  • 以上代碼均在Chrome瀏覽器console環境下測試
  • 在使用set,get函數的時候,不能和value屬性和writable屬性一塊兒用,會報錯
相關文章
相關標籤/搜索