一种新的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 相关文章推荐
JS 控制CSS样式表
Aug 20 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
Sep 23 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 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利用COM对象访问SQLServer、Access
2006/10/09 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
jquery实现掷骰子小游戏
2019/10/24 jQuery
JS精确判断数据类型代码实例
2019/12/18 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
Django查询数据库的性能优化示例代码
2017/09/24 Python
Python实现Dijkstra算法
2018/10/17 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
python装饰器常见使用方法分析
2019/06/26 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
学习党课思想汇报
2013/12/29 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
小学教师读书笔记
2015/07/01 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript
如何Python使用re模块实现okenizer
2022/04/30 Python
图神经网络GNN算法
2022/05/11 Python