JavaScript ES5之Object.create函数详解

引见

在建立对象的时刻,我们有2种经常运用要领

一个是文本标记法(var obj = {}),一种是应用Object函数举行对象的建立(new Object()).

然则这两种体式格局并非建立的一个完完整全“干清洁净”的对象,这里的清洁只得是没有继承链.

荣幸的是,ES5为我们供应了一种建立完整”清洁”的对象的要领,Object.create函数,接下我将向人人引见Object.create的细致运用

语法

javascript   Object.create(proto, [ propertiesObject ]); 

参数引见

proto

一个对象,作为新建立对象的原型。假如 proto 参数不是 null 或一个对象值,则抛出一个 TypeError 非常。null示意没有原型对象(如许就建立了一个”清洁的对象”)

propertiesObject

一个对象值,能够包括若干个属性,属性名为新建对象的属性名,属性值为谁人属性的属性描述符对象.(属性将做简朴引见,背面将细致解答)

  • value: 设置属性的值
  • writable: 布尔值,设置属性是不是能够被重写,默许属性值为false(不能被重写)
  • enumerable: 布尔值,设置属性是不是能够被罗列,默许属性值为false(不能被罗列)
  • configurable: 布尔值,设置属性是不是能够被删除,默许属性值为false(不能被删除)
  • get: 函数,设置属性返回效果(背面解答)
  • set: 函数,有一个参数(背面解答)

细致运用

光看观点实在最先我也很晕 (@﹏@)~,都是实践出真章,OK! ~如今最先~

简朴对象建立

继承上面的建立”清洁”的对象,我们能够这么做:

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

如今我想建立一个银行账户对象,占时关注它是哪一个银行的

javascript   var account = Object.create(Object.prototype,{
   type: {
       value: "建设银行"
       //enumerable: false
       //configurable: false
       //writable: false
   }
   });
   account.type; // "建设银行"
   

writable属性运用

继承上面的例子,有猎奇的同砚能够已发现了,上面的例子中,我们做一下操纵:

javascript       account.type = "人民银行"; //"人民银行"
       account.type; // "建设银行"

MD,真是日了狗了,这是怎么回事?别急,这就是writable属性惹得货,假如我们将属性设置为true

javascript       account.type = "人民银行"; //"人民银行"
       account.type; // "人民银行"

configurable属性运用

照样上面的例子,倏忽,我不想要account对象的type属性了,天然的我们会想到

javascript       delete account.type // false

我去!!!删都不让我删!? 别急,此次是configurable属性的题目,假如我们将它设置为true

javascript       account.type; // "建设银行"
       delete account.type // true
       account.type; // undefined

enumerable属性值

如今我要遍历account对象

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

没有效果!?type属性去哪了!?我晓得人人都很智慧,此次肯定是enumerable属性值惹得祸,假如enumerable属性设置为true

javascript       for(var i in account){
           console.log(account[i]);
       }
       // "建设银行"

get和set的用法

如今我须要我的account对象有别的一个属性:账户号码,我须要假如修正了给出特定花样,没有账户须要给出正告

javascript       var 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属性一升引,会报错
    原文作者:blackcater
    原文地址: https://segmentfault.com/a/1190000002979437
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞