Object.created浅析

栏目: JavaScript · 发布时间: 5年前

内容简介:Object.created是ES5出生的,官方给的介绍是官方特地介绍了语法:此处对Object.defineProperties()不多加赘述,介绍一个概念和用法不应该引入其他难以理解的部分和概念,Object.defineProperties()后续我可能会追加一篇文章专门介绍

Object.created是ES5出生的,官方给的介绍是 Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__ 对于 __proto__ 的解释请戳这里 简单理解,Object.created是一个继承方法,**返回一个新对象,带着指定的原型对象和属性。**例如:

const person = {
  isHuman: false,
  printIntroduction: function () {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  }
};

const me = Object.create(person);

me.name = "Matthew"; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten

me.printIntroduction();
// "My name is Matthew. Am I human? true"
复制代码

语法

官方特地介绍了语法:

Object.create(proto, [propertiesObject])

参数: proto :新创建对象的原型对象。 propertiesObject :可选。如果没有指定为  undefined ,则是要添加到新创建对象的可枚举属性(即其自身定义的属性,而不是其原型链上的枚举属性)对象的属性描述符以及相应的属性名称。这些属性对应 Object.defineProperties() 的第二个参数。如果 propertiesObject 参数不是  null 或一个对象,则抛出一个 TypeError 异常。

此处对Object.defineProperties()不多加赘述,介绍一个概念和用法不应该引入其他难以理解的部分和概念,Object.defineProperties()后续我可能会追加一篇文章专门介绍

常见用法

我们平时常用的就是使用一个参数的情况,可以实现简单的继承,例如上面的例子,包含一个参数,直接将某一个对象当作原型对象,使新的对象去继承。

包含第二个参数的用法

包含第二个参数的用法可能在大多数场景下用的比较少,尤其是业务代码中会比较少的用到。但是深入探究第二个参数的用法之后,可以给我们带来很多便利: 举例

  1. 创建一个原型为null的空对象
let o
o = Object.create(null)
//得到的结果是这个对象No properties
复制代码
  1. 创建一个空对象的原理
o = {};
// 以字面量方式创建的空对象就相当于:
o = Object.create(Object.prototype);
复制代码
  1. 多个参数
o = Object.create(Object.prototype, {
  // foo会成为所创建对象的数据属性
  foo: { 
    writable:true,
    configurable:true,
    value: "hello" 
  },
  // bar会成为所创建对象的访问器属性
  bar: {
    configurable: false,
    get: function() { return 10 },
    set: function(value) {
      console.log("Setting `o.bar` to", value);
    }
  }
});
复制代码
Object.created浅析

4. 创建一个以另一个空对象为原型,且拥有一个属性的对象

o = Object.create({}, { p: { value: 42 } })

// 省略了的属性特性默认为false,所以属性p是不可写,不可枚举,不可配置的:
o.p = 24
o.p
//42

o.q = 12
for (var prop in o) {
   console.log(prop)
}
//"q"

delete o.p
//false
复制代码
  1. 创建一个可写的,可枚举的,可配置的属性
o2 = Object.create({}, {
  p: {
    value: 42, 
    writable: true,
    enumerable: true,
    configurable: true 
  } 
});
复制代码

现在做有关继承相关的操作,大家更习惯用ES6的`Class xx extends xxx`来实现继承,在ES6出现之前,用的大多是call,apply,bind和Object.create;但是MDN上明确说了Class的语法:

ECMAScript 2015 中引入的 JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖。类语法不会为JavaScript引入新的面向对象的继承模型。

所以最终我们写的代码底层仍然是基于原型来进行继承的。虽然ES6里面涉及到的关键字,例如:super、constructor、extends、static和 java 中类里面涉及到的关键字相同,但是实际上是完全不同的,不能用看待java中类的眼光去看待JavaScript中的'Class',但是针对Class的用法和基于prototype实现的继承或声明一个'类'在底层其实是相同的。MDN文档后面并没有polyfill相关的代码,我个人的想法是在一定程度上,polyfill是没有必要的存在,这两种写法涉及到的底层是相同的,只不过区别在于使用的浏览器是否能正确识别Class一系列的关键字而已。 如果有兴趣还可以去试一下用typeof 操作符看一下class声明的“类”的具体类型

Object.created浅析

本来是想说一下Object.create的用法和我们平时没注意到的点……结果扯到了ES6中的class上~ 下个周打算写一下symbol的使用:new_moon_with_face:


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

细节决定交互设计的成败

细节决定交互设计的成败

张亮 / 2009-3 / 49.00元

《细节决定交互设计的成败》是一本非常实用的有关软件界面的交互设计和可用性设计方面知识的书籍,通过采用一问一答的形式,你将会有针对性地学习到一些能够很快应用在自己软件开发工作中的细节知识和诀窍。例如,如何减轻用户的等待感,如何预防和减少用户的使用错误等。另外,你会发现阅读《细节决定交互设计的成败》时会非常轻松和愉悦;这是由于《细节决定交互设计的成败》写作上的两个特点:第一,采用较多日常生活中的例子来......一起来看看 《细节决定交互设计的成败》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试