关于前端:深入理解JavaScriptObject对象

先回顾下之前一节所讲常识

• 援用类型指的是 object
• object 包含内置对象、宿主对象、自定义对象
• 内置对象中有 Object、Function、Array、String、Number、Boolean 等原生对象构造函数
• 在 JavaScript 中，所有皆对象（除 undefined、null 外）

无论是内置对象，还是自定义对象，都是基于 Object 来创立，其中的原理是原型继承，所以笔者喜爱称 Object.prototype 为“始祖伟人”，所有力量源于尤弥尔

咱们看看 Object 是什么，它能做什么，并将其扩大，连贯 Object 相干的各个知识点。常识列表如下：

• 属性与办法
• 如何创建对象
• 如何拷贝对象
• 对象继承的机密——原型
• 继承的九种办法

属性与办法

JavaScript 对象能够从一个称为原型的对象里继承属性。对象的办法通常是继承的属性。这种”原型式继承“（prototypal inheritance）是 JavaScript 的外围特色

能够看下这个例子

var johan = {name: 'johan'};
console.dir(johan);

能看出，咱们应用对象字面量的办法创立了一个对象实例 johan，并赋予了一个属性 name，值为 johan，当打印日志时，发现多了一个对象[[Prototype]]，并且这个对象中有很多对象

这是因为「对象字面量」创立的实例，在底层曾经做了「隐式继承」的操作，它和 new Object('johan') 是一个意思，除此之外，如果应用 new，会进行原型继承，[[prototype]] 正是继承 Object 的原型（即 Object.prototype）

这里，无妨多说一句，实例是继承 Object.prototype，而不是 Object，原型才会被继承，构造函数是个空壳，不信，你许可 Object 和 Object.prototype，看看内容

console.dir(Object)如下图所示：

console.dir(Object.prototype)如下图所示

johan 的 [[prototype]] 和 Object 的 prototype 的内容统一

对于原型和继承的内容后文会具体阐明，这里埋个伏笔

看以上例子，你能发现 Object 的属性和办法不少，而且它的实例也有属性和办法，这里对其进行阐明注解

静态方法

• Object.assign()：通过复制一个或多个对象来创立一个新的对象
• Object.create()：应用指定的原型对象和属性创立一个新对象
• Object.defineProperty()：给对象增加一个属性并指定该属性的配置
• Object.defineProperties()：给对象增加多个属性并别离指定它们的配置
• Object.entries()：返回给定对象本身可枚举属性的 [key, value] 数组
• Object.keys()：返回一个蕴含所有给定对象本身可枚举属性名称的数组
• Object.values()：返回给定对象本身可枚举值的数组

实例属性

• Object.prototype.constructor：一个援用值，指向 Object 构造函数
• Object.prototype.__proto__：指向一个对象，当一个 object 实例化时，应用该对象作为实例化对象的原型

实例办法

• Object.prototype.hasOwnProperty()：返回一个布尔值，用于示意一个对象本身是否蕴含指定的属性，该办法并不会查找原型链上继承来的属性

  • 用 hasOwnProperty 就能检测出，它能区别本身属性与继承属性
• Object.prototype.isPrototypeOf()：返回一个布尔值，用于示意该办法所调用的对象是否在指定对象的原型链中
• Object.prototype.toString()：返回一个代表该对象的字符串。
• Object.prototype.valueOf()：返回指定对象的原始值

更多信息能够查看 MDN

理解 Object 的属性、办法，以及基于它创立的实例属性和办法后，咱们去看看如何创建对象

创建对象

有三种办法。对象间接量、关键字 new、Object.create 函数来创建对象

对象间接量

创立一个新对象的最简略的办法，就是用对象间接量，就如应用以下语句：

var obj = {};

{} 示意的 new Object()

关键字 new

应用 new 创立新对象，个别要追随一个函数调用。这里的函数称为构造函数（constructor），构造函数用以初始化一个新创建的对象。例如：

var obj = new Object(); // 成果如同 var obj = {}

更多内容，可查看这篇 new 做了什么（后续文章会更新）

Object.create

此办法是 ECMAScript 5 定义了，它牵扯到原型、继承等方面的常识。简略来说，它发明了一个新对象，其中第一个参数就是这个对象的原型。而第二个可选参数，是对其属性的更多形容。例如：

var obj = Object.create({name: 'johan', age: 23}); // obj 继承了属性 name 和 age
var obj2 = Object.create(null); // obj2 不继承任何属性和办法
var obj3 = Object.create(Object.prototype); // 与 {} 和 new Object() 一个意思

更多内容，可查看这篇 Object.create（后续文章会更新）

之所以将 new 和 Object.create 独自拿出来说，是因为两则都是比拟重要的知识点，非一两句就能说明确

理解 Object 是如何发明的之后，咱们看看如何赋值

如何拷贝对象

赋值是简略的，但赋值后的再赋值，就会引起源对象被批改

var o1 = {name: 'johan'};
var o2 = o1;
o2.name = 'elaine';
console.log(o1); // {name: 'elaine'}
console.log(o2); // {name: 'elaine'}

之前文章也说过，因为 Object 是援用类型，援用类型的拷贝拷贝的是援用地址，所以当 o2 被批改时，o1 也随之被批改

针对如何拷贝对象，这篇文章拷贝的机密(后续文章会更新) 会对其进行阐明

对象继承的机密——原型

要想解释 JavaScript 中为什么大多数元素都是对象，就必须先晓得原型。JavaScript 是一门基于原型的语言——每个对象领有一个原型对象，对象以其原型为模板、从原型继承办法和属性。原型对象也可能领有原型，并从中继承办法和属性，一层一层，以此类推。这种关系常被称为原型链

无关原型和原型链的常识，会演绎总结为一篇——原型(后续文章会更新)

继承的九种办法

原型是实现继承的办法之一，当然 JavaScript 还有其余的办法，总共九种

• 原型链继承
• 盗用构造函数
• 组合继承（原型链 + 盗用构造函数）

• 原型式继承

  • Object.create
  • Object.setPrototypeOf
• 寄生式继承

• 寄生式组合继承

  • Object.create + 盗用构造函数
  • Object.setPrototypeOf + 盗用构造函数
• 类继承

具体的文章会在 继承 (后续文章会更新) 阐明

总结

这一节，咱们就 Object 进行开展，具体阐明了 Object 及其实例的属性与办法。并对如何创建对象、如何拷贝对象、原型、继承等进行阐明剖析，因篇幅以及知识点聚焦问题，本节不做过多阐明，下一节，咱们从如何创建对象之 new（后续文章会更新）说起

系列文章

• 深刻了解 JavaScript- 开篇
• 深刻了解 JavaScript-JavaScript 是什么
• 深刻了解 JavaScript-JavaScript 由什么组成
• 深刻了解 JavaScript- 所有皆对象