一种新的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 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
Jun 26 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
原生javascript实现分页效果
Apr 21 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
深入理解Node module模块
Mar 26 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 Javascript
vue实现分页组件
Jun 16 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
模仿OSO的论坛(三)
2006/10/09 PHP
php 过滤危险html代码
2009/06/29 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
js 操作css实现代码
2009/06/11 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
javascript验证身份证号
2015/03/03 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
Python 函数返回值的示例代码
2019/03/11 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
土木建筑学生自我评价
2014/01/14 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python
使用Ajax实现无刷新上传文件
2022/04/12 Javascript