JavaScript ES5之Object.create函數詳解

介紹

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

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

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

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

語法

javascriptObject.create(proto, [ propertiesObject ]);

參數介紹

proto

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

propertiesObject

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

• 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屬性一塊兒用，會報錯