一种新的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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
javascript的BOM
May 03 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
bootstrap弹出层的多种触发方式
May 10 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
小程序中设置缓存过期的实现方法
Jan 14 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学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
pycharm 使用心得(三)Hello world!
2014/06/05 Python
Python的类实例属性访问规则探讨
2015/01/30 Python
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
比利时买床:Beter Bed
2017/12/06 全球购物
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
工商治理实习生的自我评价
2014/01/15 职场文书
政治表现评语
2014/05/04 职场文书
扬州个园导游词
2015/02/06 职场文书
建国大业观后感600字
2015/06/01 职场文书
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript