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属性一块儿用，会报错