一种新的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 相关文章推荐
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
javascript cookie的简单应用
Feb 24 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
分析javascript原型及原型链
Mar 18 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
js实现简单选项卡制作
Aug 05 Javascript
JavaScript中arguments的使用方法详解
Dec 20 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
PHP 命名空间实例说明
2011/01/27 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
javascript之更有效率的字符串替换
2008/08/02 Javascript
使用js获取QueryString的方法小结
2010/02/28 Javascript
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
Python collections模块使用方法详解
2019/08/28 Python
如何获取Python简单for循环索引
2019/11/21 Python
python 连续不等式语法糖实例
2020/04/15 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
2014年作风建设工作总结
2014/10/29 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
干部考察材料范文
2014/12/24 职场文书
辛亥革命观后感
2015/06/02 职场文书
陈斌强事迹观后感
2015/06/17 职场文书