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

 更新时间:2015年12月28日 17:16:56   作者:yupeng  
这篇文章主要介绍了一种新的javascript对象创建方式Object.create(),感兴趣的小伙伴们可以参考一下

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()的详细介绍,希望对大家的学习有所帮助。

相关文章

  • JS获取鼠标选中的文字

    JS获取鼠标选中的文字

    下面是小编给大家分享的js获取鼠标选中的文字和js获取鼠标选中的值关键代码,大家如果有需要可以参考下
    2016-08-08
  • 十分钟打造AutoComplete自动完成效果代码

    十分钟打造AutoComplete自动完成效果代码

    十分钟打造山寨版谷歌AutoComplete,因为是十分钟打造出来的,所以只考虑表面效果,其他全部忽略,绝对的山寨。
    2009-12-12
  • javascript导出csv文件(excel)的方法示例

    javascript导出csv文件(excel)的方法示例

    这篇文章主要给大家介绍了关于javascript导出csv文件(excel)的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用javascript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • 详解ES7 Decorator 入门解析

    详解ES7 Decorator 入门解析

    这篇文章主要介绍了详解ES7 Decorator 入门解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 自制简易打赏功能的实例

    自制简易打赏功能的实例

    下面小编就为大家带来一篇自制简易打赏功能的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JavaScript装饰者模式原理与用法实例详解

    JavaScript装饰者模式原理与用法实例详解

    这篇文章主要介绍了JavaScript装饰者模式原理与用法,结合实例形式总结分析了JavaScript装饰者模式相关概念、功能、原理、用法及操作注意事项,需要的朋友可以参考下
    2020-03-03
  • JS组件Bootstrap ContextMenu右键菜单使用方法

    JS组件Bootstrap ContextMenu右键菜单使用方法

    这篇文章主要为大家详细介绍了JS组件Bootstrap ContextMenu右键菜单使用方法,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • js实现微博发布小功能

    js实现微博发布小功能

    本篇文章主要介绍了javascript实现微博发布小功能的示例代码,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 详解Typescript 内置的模块导入兼容方式

    详解Typescript 内置的模块导入兼容方式

    这篇文章主要介绍了详解Typescript 内置的模块导入兼容方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • CSDN上快速结贴的方法,JS实现

    CSDN上快速结贴的方法,JS实现

    CSDN上快速结贴的方法,JS实现...
    2007-03-03

最新评论