资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/JavaScript ES5之Object.create函数详解

JavaScript ES5之Object.create函数详解

zhaofeihao / 555人阅读

介绍 
</>复制代码 
  1.   
    在创建对象的时候，我们有2种常用方法
</>复制代码 
  1.   
    一个是文本标记法(var obj = {}),一种是运用Object函数进行对象的创建(new Object()).
</>复制代码 
  1.   
    但是这两种方式并不是创建的一个完完全全"干干净净"的对象,这里的干净只得是没有继承链.
</>复制代码 
  1.   
    幸运的是，ES5为我们提供了一种创建完全"干净"的对象的方法，Object.create函数,接下我将向大家介绍Object.create的详细使用
语法 
</>复制代码 
  1. </>复制代码 
    1. javascript   Object.create(proto, [ propertiesObject ]);
参数介绍 
</>复制代码 
  1.   
    proto
</>复制代码 
  1.   
    </>复制代码 
    1.     
      一个对象，作为新创建对象的原型。如果 proto 参数不是 null 或一个对象值，则抛出一个 TypeError 异常。null表示没有原型对象(这样就创建了一个"干净的对象")
    2.   
</>复制代码 
  1.   
    propertiesObject
</>复制代码 
  1.   
    </>复制代码 
    1.     
      一个对象值，可以包含若干个属性，属性名为新建对象的属性名，属性值为那个属性的属性描述符对象.(属性将做简单介绍，后面将详细解答)
    2.   
</>复制代码 
  1.   
    </>复制代码 
    1.     
    3. value: 设置属性的值
    4.     
</>复制代码 
  1.   
    </>复制代码 
    1.     
    3. writable: 布尔值,设置属性是否可以被重写,默认属性值为false(不能被重写)
    4.     
</>复制代码 
  1.   
    </>复制代码 
    1.     
    3. enumerable: 布尔值,设置属性是否可以被枚举,默认属性值为false(不能被枚举)
    4.     
</>复制代码 
  1.   
    </>复制代码 
    1.     
    3. configurable: 布尔值,设置属性是否可以被删除，默认属性值为false(不能被删除)
    4.     
</>复制代码 
  1.   
    </>复制代码 
    1.     
    3. get: 函数,设置属性返回结果(后面解答)
    4.     
</>复制代码 
  1.   
    </>复制代码 
    1.     
    3. set: 函数,有一个参数(后面解答)
    4.
详细使用

光看概念其实开始我也很晕 (@﹏@)~，都是实践出真章，OK! ~现在开始~

简单对象创建 
</>复制代码 
  1.   
    继续上面的创建"干净"的对象，我们可以这么做:
</>复制代码 
  1. </>复制代码 
    1. javascript   var clearObj = Object.create(null);
    2.    //Object with no prototype
</>复制代码 
  1.   
    现在我想创建一个银行账户对象，占时关注它是哪个银行的
</>复制代码 
  1. </>复制代码 
    1. javascript   var account = Object.create(Object.prototype,{
    2.    type: {
    3.        value: "建设银行"
    4.        //enumerable: false
    5.        //configurable: false
    6.        //writable: false
    7.    }
    8.    });
    9.    account.type; // "建设银行"
  2. </>复制代码 
    1.    
  3.   
  4.   writable属性使用
</>复制代码 
  1.   
    继续上面的例子，有好奇的同学可能已经发现了，上面的例子中，我们做一下操作:
</>复制代码 
  1. </>复制代码 
    1. javascript       account.type = "人民银行"; //"人民银行"
    2.        account.type; // "建设银行"
</>复制代码 
  1.   
    MD,真是日了狗了，这是怎么回事？别急，这就是writable属性惹得货，如果我们将属性设置为true
</>复制代码 
  1. </>复制代码 
    1. javascript       account.type = "人民银行"; //"人民银行"
    2.        account.type; // "人民银行"
configurable属性使用 
</>复制代码 
  1.   
    还是上面的例子，突然，我不想要account对象的type属性了，自然的我们会想到
</>复制代码 
  1. </>复制代码 
    1. javascript       delete account.type // false
</>复制代码 
  1.   
    我去！！！删都不让我删！？ 别急，这次是configurable属性的问题，如果我们将它设置为true
</>复制代码 
  1. </>复制代码 
    1. javascript       account.type; // "建设银行"
    2.        delete account.type // true
    3.        account.type; // undefined
enumerable属性值 
</>复制代码 
  1.   
    现在我要遍历account对象
</>复制代码 
  1. </>复制代码 
    1. javascript       for(var i in account){
    2.            console.log(account[i]);
    3.        }
    4.        // undefined
</>复制代码 
  1.   
    没有结果！？type属性去哪了！？我知道大家都很聪明，这次肯定是enumerable属性值惹得祸,如果enumerable属性设置为true
</>复制代码 
  1. </>复制代码 
    1. javascript       for(var i in account){
    2.            console.log(account[i]);
    3.        }
    4.        // "建设银行"
get和set的用法 
</>复制代码 
  1.   
    现在我需要我的account对象有另外一个属性：账户号码,我需要如果修改了给出特定格式，没有账户需要给出警告
</>复制代码 
  1. </>复制代码 
    1. javascript       var account = Object.create(Object.prototype,{
    2. ?            type: {
    3.                value: "建设银行",
    4.                enumerable: true,
    5.                configurable: false, // 不能被删除
    6.                writable: false // 不能被修改
    7.            },
    8.            number: {
    9.                get: function(){
    10.                    if((typeof number) === "undefined"){
    11.                        //说明没有设置number
    12.                        return "您还没有开通账户!请联系前台!";
    13.                    }
    14.                    return "您的账户号码是："+number;
    15.                },
    16.                set: function(num){
    17.                    number = num;
    18.                    if(this.cTime === 0){
    19.                        console.log("账户开通成功！");
    20.                        this.cTime++;
    21.                    }else{
    22.                        console.log("账户号码已经被修改！");
    23.                    }
    24.                }
    25.            },
    26.            cTime: {
    27.                value: 0,
    28.                writable: true
    29.            }
    30.        });
    31.        account.type; // "建设银行"
    32.        account.number; // "您还没有开通账户!请联系前台!"
    33.        account.number = "610XXXXXXXXXX21";
    34.        // "账户开通成功！"
    35.        account.number; // "您的账户号码是：610XXXXXXXXXX21"
    36.        account.number = "610XXXXXXXXXX88";
    37.        // "账户号码已经被修改！"
    38.        account.number; // "您的账户号码是：610XXXXXXXXXX88"
注意 
</>复制代码 
  1.   
  2. 以上代码均在Chrome浏览器console环境下测试
  3.   
</>复制代码 
  1.   
  2. 在使用set,get函数的时候，不能和value属性和writable属性一起用，会报错
  3.
GPU云服务器 云服务器 时间函数详解 hash函数详解 javascript详解 javascript闭包详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85801.html

相关文章

  • javasscript - 收藏集 - 掘金

    摘要：跨域请求详解从繁至简前端掘金什么是为什么要用是的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题。异步编程入门道典型的面试题前端掘金在界中，开发人员的需求量一直居高不下。 jsonp 跨域请求详解——从繁至简 - 前端 - 掘金什么是jsonp？为什么要用jsonp?JSONP(JSON with Padding)是JSON的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题...

    Rango 评论0 收藏0

  • 详解javascript的类

    摘要：原文地址详解的类博主博客地址的个人博客从当初的一个弹窗语言，一步步发展成为现在前后端通吃的庞然大物。那么，的类又该怎么定义呢在面向对象编程中，类是对象的模板，定义了同一组对象又称实例共有的属性和方法。这个等同于的属性现已弃用。。 前言 生活有度，人生添寿。 原文地址：详解javascript的类 博主博客地址：Damonare的个人博客   Javascript从当初的一个弹窗语言，一...

    hufeng 评论0 收藏0

  • 详解javascript的类

    摘要：原文地址详解的类博主博客地址的个人博客从当初的一个弹窗语言，一步步发展成为现在前后端通吃的庞然大物。那么，的类又该怎么定义呢在面向对象编程中，类是对象的模板，定义了同一组对象又称实例共有的属性和方法。这个等同于的属性现已弃用。。 前言 生活有度，人生添寿。 原文地址：详解javascript的类 博主博客地址：Damonare的个人博客   Javascript从当初的一个弹窗语言，一...

    marek 评论0 收藏0

  • javascript对象详解：__proto__和prototype的区别和联系

    摘要：当这步完成，这个对象就与构造函数再无联系，这个时候即使构造函数再加任何成员，都不再影响已经实例化的对象了。此时，对象具有了和属性，同时具有了构造函数的原型对象的所有成员，当然，此时该原型对象是没有成员的。 前言 本篇文章用来记录下最近研究对象的一些心得，做一个记录与总结，以加深自己的印象，同时，希望也能给正在学习中的你一点启发。本文适合有一定JavaScript基础的童鞋阅读。原文戳这...

    chavesgu 评论0 收藏0

发表评论

登陆后可评论

0条评论

zhaofeihao

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<