一种新的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 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
从JavaScript的函数重名看其初始化方式
Mar 08 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
js简单的表格添加行和删除行操作示例
Mar 31 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
通过实例了解JS 连续赋值
Sep 24 Javascript
JavaScript实现网页跨年倒计时
Dec 02 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
自己动手做一个SQL解释器
2006/10/09 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
用客户端js实现带省略号的分页
2013/04/27 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
nodeJS微信分享
2017/12/20 NodeJs
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python封装对象实现时间效果
2020/04/23 Python
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
python处理大数字的方法
2015/05/27 Python
Python单链表简单实现代码
2016/04/27 Python
Python线程创建和终止实例代码
2018/01/20 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
Python类型转换的魔术方法详解
2020/12/23 Python
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
运动会广播稿80字
2014/01/23 职场文书
教师现实表现材料
2014/02/14 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
五好家庭事迹材料
2014/12/20 职场文书
长江三峡导游词
2015/01/31 职场文书
工程部主管岗位职责
2015/02/12 职场文书
心术观后感
2015/06/11 职场文书
基于Python的EasyGUI学习实践
2021/05/07 Python
浅谈Redis的几个过期策略
2021/05/27 Redis