一种新的javascript对象创建方式Object.create()


Posted in Javascript onDecember 28, 2015

Object.create() 是什么?
Object.create(proto [, propertiesObject ]) 是E5中提出的一种新的对象创建方式,第一个参数是要继承的原型,如果不是一个子函数,可以传一个null,第二个参数是对象的属性描述符,这个参数是可选的。
例如: 

function Car (desc) {
  this.desc = desc;
  this.color = "red";
}
 
Car.prototype = {
  getInfo: function() {
   return 'A ' + this.color + ' ' + this.desc + '.';
  }
};
//instantiate object using the constructor function
var car = Object.create(Car.prototype);
car.color = "blue";
alert(car.getInfo());

结果为:A blue undefined.

1、propertiesObject 参数的详细解释:(默认都为false)
数据属性:

  • writable:是否可任意写
  • configurable:是否能够删除,是否能够被修改
  • enumerable:是否能用 for in 枚举
  • value:值

访问属性:

  • get(): 访问
  • set(): 设置

2、例子:直接看例子就知道怎么用。 

<!DOCTYPE html>
<html>
<head>
  <title>yupeng's document </title>
  <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">

    var obj = {

      a:function(){
        console.log(100)
      },
      b:function(){
        console.log(200)
      },
      c:function(){
        console.log(300)
      }

    }

    var newObj = {};

    newObj = Object.create(obj,{
      t1:{
        value:'yupeng',
        writable:true
      },
      bar: {
        configurable: false,
        get: function() { return bar; },
        set: function(value) { bar=value }
      }
      
    })

    console.log(newObj.a());
    console.log(newObj.t1);
    newObj.t1='yupeng1'
    console.log(newObj.t1);
    newObj.bar=201;
    console.log(newObj.bar)
    
    function Parent() { }
    var parent = new Parent();
    var child = Object.create(parent, {
       dataDescriptor: {
        value: "This property uses this string as its value.",
        writable: true,
        enumerable: true
       },
       accessorDescriptor: {
        get: function () { return "I am returning: " + accessorDescriptor; },
        set: function (val) { accessorDescriptor = val; },
        configurable: true
       }
      });

    child.accessorDescriptor = 'YUPENG';
    console.log(child.accessorDescriptor);



    var Car2 = function(){
      this.name = 'aaaaaa'
    } //this is an empty object, like {}
    Car2.prototype = {
     getInfo: function() {
      return 'A ' + this.color + ' ' + this.desc + '.';
     }
    };

    var newCar = new Car2();
     
    var car2 = Object.create(newCar, {
     //value properties
     color:  { writable: true, configurable:true, value: 'red' },
     //concrete desc value
     rawDesc: { writable: true, configurable:true, value: 'Porsche boxter' },
     // data properties (assigned using getters and setters)
     desc: { 
      configurable:true, 
      get: function ()   { return this.rawDesc.toUpperCase(); },
      set: function (value) { this.rawDesc = value.toLowerCase(); } 
     }
    }); 
    car2.color = 'blue';
    console.log(car2.getInfo());
    car2.desc = "XXXXXXXX";
    console.log(car2.getInfo());
    console.log(car2.name);



  </script>
</body>
</html>

结果为:
100
yupeng
yupeng1
201
I am returning: YUPENG
A blue PORSCHE BOXTER.
A blue XXXXXXXX.
aaaaaa

以上就是针对javascript一种新的对象创建方式Object.create()的详细介绍,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jquery 图片预加载 自动等比例缩放插件
Dec 25 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
JavaScrip常见的一些算法总结
Dec 28 #Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 #Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 #Javascript
Bootstrap实现响应式导航栏效果
Dec 28 #Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 #Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 #Javascript
Bootstrap实现默认导航栏效果
Sep 21 #Javascript
You might like
PHP高级OOP技术演示
2009/08/27 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
javascript数组去掉重复
2011/05/12 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
Python正则表达式匹配ip地址实例
2014/10/09 Python
python实现画圆功能
2018/01/25 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
办公室综合文员岗位职责范本
2014/02/13 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
校车安全管理责任书
2015/05/11 职场文书
入党介绍人意见2015
2015/06/01 职场文书
乱世佳人观后感
2015/06/08 职场文书
学雷锋活动简报
2015/07/20 职场文书