一种新的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 相关文章推荐
List the UTC Time on a Computer
Jun 11 Javascript
js 替换
Feb 19 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
angular分页指令操作
Jan 09 Javascript
详解Vue监听数据变化原理
Mar 08 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 Javascript
Node与Python 双向通信的实现代码
Jul 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
默默简单的写了一个模板引擎
2007/01/02 PHP
PHP实现用户认证及管理完全源码
2007/03/11 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
js实现简单扫雷
2020/11/27 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python常见异常分类与处理方法
2017/06/04 Python
python正则表达式的使用
2017/06/12 Python
Python字符串处理实现单词反转
2017/06/14 Python
python使用opencv读取图片的实例
2017/08/17 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
Python实现的计算器功能示例
2018/04/26 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
司法建议书范文
2014/05/13 职场文书
销售口号大全
2014/06/11 职场文书
公司员工活动策划方案
2014/08/20 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers