一种新的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 生成指定范围数值随机数
Jan 09 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
mock.js模拟前后台交互
Jul 25 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
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
javascript时区函数介绍
2012/09/14 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
Python备份Mysql脚本
2008/08/11 Python
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
简单上手Python中装饰器的使用
2015/07/12 Python
Python实现数据库并行读取和写入实例
2017/06/09 Python
详细分析python3的reduce函数
2017/12/05 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
Python 如何对文件目录操作
2020/07/10 Python
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
工业自动化专业自荐信范文
2014/04/10 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
2015元旦感言
2015/12/09 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python