一种新的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 相关文章推荐
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
jQuery限制图片大小的方法
May 25 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
vue项目持久化存储数据的实现代码
Oct 01 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
vue使用recorder.js实现录音功能
Nov 22 Javascript
四十九个javascript小知识实用技巧
Nov 20 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 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
php在文件指定行中写入代码的方法
2012/05/23 PHP
解析php5配置使用pdo
2013/07/03 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
Vue组件系列开发之模态框
2019/04/18 Javascript
element中的$confirm的使用
2020/04/26 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
Python定时器实例代码
2017/11/01 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
python如何生成各种随机分布图
2018/08/27 Python
Python如何使用字符打印照片
2020/01/03 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
python Timer 类使用介绍
2020/12/28 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
热能动力工程毕业生自荐信
2013/11/07 职场文书
中学教师岗位职责
2013/11/26 职场文书
车队司机自我鉴定
2014/03/02 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
厕所文明标语
2014/06/11 职场文书
运动员获奖感言
2014/08/15 职场文书
违纪开除通知书
2015/04/25 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
《包身工》教学反思
2016/02/23 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python