一种新的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代码压缩器
Oct 12 Javascript
js+css在交互上的应用
Jul 18 Javascript
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
React Router基础使用
Jan 17 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
详解Angular 4 表单快速入门
Jun 05 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 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
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
AngularJS快速入门
2015/04/02 Javascript
js同源策略详解
2015/05/21 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
理解javascript模块化
2016/03/28 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
python如何通过protobuf实现rpc
2016/03/06 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
临床医学应届生求职信
2013/11/06 职场文书
材料采购员岗位职责
2013/12/17 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
MySQL常见优化方案汇总
2022/01/18 MySQL
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS