介绍

在创建对象的时候,我们有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 // trueaccount.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"){//说明没有设置numberreturn "您还没有开通账户!请联系前台!";}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属性一起用,会报错

JavaScript ES5之Object.create函数详解相关推荐

  1. Javascript 函数详解

    Javascript 函数详解 1)函数声明: 通过关键字function定义,把函数作为变量来声明 函数声明后不会立即执行,会在我们需要的时候调用到. <script>function ...

  2. [js]JavaScript Number.toPrecision() 函数详解

    [js]JavaScript Number.toPrecision() 函数详解 JavaScript: numberObject.toPrecision( [ precision ] ) 如果没有提 ...

  3. JavaScript的函数详解

    JavaScript的函数详解 一.什么是函数 二.函数的使用 1.函数的声明 2.函数的调用 3.函数的参数:参入运算的数据 (1)形参(形式参数) (2)实参(实在参数): (3)参数之间的数据传 ...

  4. vue动画过渡 javascript钩子函数详解

    vue动画过渡js钩子函数详解 前言 js钩子函数运行时间 js钩子函数的过渡或动画 总结 结语 前言 转载请注明出处并附上链接. 本文中,enter(leave)过程指的是beforeEnter.e ...

  5. JavaScript 面试中常见算法问题详解

    JavaScript 面试中常见算法问题详解,翻译自 https://github.com/kennymkchan/interview-questions-in-javascript.下文提到的很多问 ...

  6. 匿名函数python_基于python内置函数与匿名函数详解

    内置函数 Built-in Functions abs() dict() help() min() setattr() all() dir() hex() next() slice() any() d ...

  7. php中this的使用技巧,JavaScript中this关键字使用方法详解

    JavaScript中this关键字使用方法详解 在面向对象编程语言中,对于this关键字我们是非常熟悉的.比如C++.C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了 ...

  8. html+css+javascript实现小游戏2048(详解,附源代码)

    html+css+javascript实现小游戏2048(详解,附源代码) 1.上下左右的移动原理相同,这里只详细说明向上移动的方法 2.这里的上下左右由wasd四个键控制 3-小方块空的意思就是没数 ...

  9. glTexImage2D 函数详解

    glTexImage2D 函数详解 参考 https://blog.csdn.net/jeffasd/article/details/78135588 版权 jeffasd glTexImage2D ...

最新文章

  1. python 一个文本是否包含另一字符串 in find是区分大小写的
  2. 编程珠玑第五章习题五——C++实现二分搜索时进行错误检测
  3. 准爸爸日记——20120502海淀妇幼建档续
  4. 掌握这四点核心思想,统计学才算入门
  5. nvidia-smi每0.1s实时显示显存使用情况,且数字变化处有白底
  6. 同时插入同一行记录,产生阻塞的处理分析(4号锁分析之Unique key的约束)
  7. java jndi jboss_jboss结合spring中如何配置jndi
  8. 怎样才是真正的架构师
  9. 重新理解管理信息化促进企业变革
  10. centos7 crontab 定时执行python任务不执行的原因及解决办法
  11. github API 实例 分页读取
  12. 推荐几个JAVA 学习不错的网站
  13. drools规则引擎使用文档
  14. c语言char几个字节为什么,为什么在C语言中char是1个字节(Why char is of 1 byte in C language)...
  15. halcon修改图像的灰度值
  16. html怎么给图片加个叉,html+css 图片右上角加删除叉,图片删除
  17. python爬取网页内容post_python爬虫之使用POST抓取网页内容
  18. AE粒子跟随手势特效
  19. moment如何转换时间戳 毫秒换成为秒的时间戳
  20. mooc过来人公开课郑莉 c++语言程序设计 编程作业答案,mooc过来人公开课郑莉 c++语言程序设计 编程作业答案...

热门文章

  1. python是动态_Python中的对象和动态性 [菜鸟的理解,高手莫入]
  2. Web 浏览器相关的一些概念
  3. 用matlab抽样定理验证,用MATLAB验证时域抽样定理
  4. MySQL使用什么关键字添加唯一约束_mysql怎么添加唯一约束?
  5. centos 访问网页重启php_php项目上线基于docker运行php+源码编译实现Nginx+阿里云RDS连接实现...
  6. mysql事件类型_MySQL binlog中的事件类型
  7. java 新项目计划_Java的新项目学成在线笔记-day6(十二)
  8. flink的operator state简单理解
  9. VB得到指定文件夹下的文件列表
  10. 《中国AI算力发展评估报告》发布!北京只能排第二,推理需求猛增