一种新的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 相关文章推荐
Javascript调用XML制作连动下拉列表框
Jun 25 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
Node.js搭建小程序后台服务
Jan 03 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
vue实现表单录入小案例
Sep 27 Javascript
JavaScript实现更换背景图片
Oct 18 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/10/02 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
python查看zip包中文件及大小的方法
2015/07/09 Python
Python随机数random模块使用指南
2016/09/09 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
详解supervisor使用教程
2017/11/21 Python
python脚本后台执行方式
2019/12/21 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
文明社区申报材料
2014/08/21 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
员工年终考核评语
2014/12/31 职场文书
世界文化遗产导游词
2015/02/13 职场文书
2015年药房工作总结
2015/04/25 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
优秀大学生申请书
2019/06/24 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书