一种新的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 相关文章推荐
html下载本地
Jun 19 Javascript
javascript 对象比较实现代码
Apr 27 Javascript
基于jquery的动态创建表格的插件
Apr 05 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 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常用函数小技巧
2008/09/11 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
详解如何运行vue项目
2019/04/15 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
个人简历自我评价
2014/01/06 职场文书
教师研修随笔感言
2014/01/23 职场文书
房地产营销策划方案
2014/02/08 职场文书
物控部经理职务说明书
2014/02/25 职场文书
学生会竞聘书范文
2014/03/31 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
工作简历的自我评价
2019/05/16 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers