「思惟导图学前端 」6k字一文搞懂Javascript对象，原型，继承

前言

去年开始我给本身画了一张知识体系的思惟导图，用于规划本身的学习范围和方向。可是我犯了一个大错，个人思惟导图只是一个全局的蓝图，而在学习某个知识点的时候没有系统化，知识太过于零散，另外一方面也很容易遗忘，回头复习时没有一个提纲，总体的学习效率不高。意识到这一点，我最近开始用思惟导图去学习和总结具体的知识点，效果还不错。试想一下，一张思惟导图的某个端点是另外一张思惟导图，这样串起来的知识链条是多么“酸爽”！固然，YY一下就行了，我保证你没有足够的时间给全部知识点都画上思惟导图，挑重点便可。

提纲思路

当咱们要研究一个问题或者知识点时，关注点无非是：

1. 是什么？

2. 作什么？

3. 为何？

很明显，搞懂“是什么”是最最基础的，而这部分却很重要。万丈高楼平地起，若是连基础都不清楚，何谈应用实践（“作什么”），更加也不会理解问题的本质（“为何”）。

而要整理一篇高质量的思惟导图，必须充分利用“总-分”的思路，首先要造成一个基本的提纲，而后从各个方面去延伸拓展，最后获得一棵较为完整的知识树。分解知识点后，在细究的过程当中，你可能还会惊喜地发现一个知识点的各个组成部分之间的关联，对知识点有一个更为饱满的认识。

梳理提纲须要对知识点有一个总体的认识。若是是学习比较陌生的领域知识，个人策略是从相关书籍或官方文档的目录中提炼出提纲。

下面以我复习javascript对象这块知识时的一些思路为例说明。

javascript对象

在复习javascript对象这块知识时，我从过往的一些使用经验，书籍，文档资料中提炼出了这么几个方面做为提纲，分别是：

• 对象的分类

• 对象的三个重要概念：类，原型，实例

• 建立对象的方法

• 对象属性的访问和设置

• 原型和继承

• 静态方法和原型方法

由此展开获得了这样一个思惟导图：

js对象

对象的分类

对象主要分为这么三大类：

• 内置对象：ECMAScript规范中定义的类或对象，好比Object, Array, Date等。

• 宿主对象：由javascript解释器所嵌入的宿主环境提供。好比浏览器环境会提供window，HTMLElement等浏览器特有的宿主对象。Nodejs会提供global全局对象

• 自定义对象：由javascript开发者自行建立的对象，用以实现特定业务。就好比咱们熟悉的Vue，它就是一个自定义对象。咱们能够对Vue这个对象进行实例化，用于生成基于Vue的应用。

对象的三个重要概念

类

javascript在ES6以前没有class关键字，但这不影响javascript能够实现面向对象编程，javascript的类名对应构造函数名。

在ES6以前，若是咱们要定义一个类，实际上是借助函数来实现的。

function Person(name) {
 this.name = name; } Person.prototype.sayHello = function() {  console.log(this.name + ': hello!'); }  var person = new Person('Faker'); person.sayHello(); 复制代码

ES6明肯定义了class关键字。

class Person {
 constructor(name) {  this.name = name;  }   sayHello() {  console.log(this.name + ': hello!');  } }  var person = new Person('Faker'); person.sayHello(); 复制代码

原型

原型是类的核心，用于定义类的属性和方法，这些属性和方法会被实例继承。

定义原型属性和方法须要用到构造函数的prototype属性，经过prototype属性能够获取到原型对象的引用，而后就能够扩展原型对象了。

function Person(name) {
 this.name = name; } Person.prototype.sexList = ['man', 'woman']; Person.prototype.sayHello = function() {  console.log(this.name + ': hello!'); } 复制代码

实例

类是抽象的概念，至关于一个模板，而实例是类的具体表现。就好比Person是一个类，而根据Person类，咱们能够实例化多个对象，可能有小明，小红，小王等等，类的实例都是一个个独立的个体，可是他们都有共同的原型。

var xiaoMing = new Person('小明');
var xiaoHong = new Person('小红');  // 拥有同一个原型 Object.getPrototypeOf(xiaoMing) === Object.getPrototypeOf(xiaoHong); // true 复制代码

如何建立对象

对象直接量

对象直接量也称为对象字面量。直接量就是不须要实例化，直接写键值对便可建立对象，堪称“简单粗暴”。

var xiaoMing = { name: '小明' };
复制代码

每写一个对象直接量至关于建立了一个新的对象。即便两个对象直接量看起来如出一辙，它们指向的堆内存地址也是不同的，而对象是按引用访问的，因此这两个对象是不相等的。

var xiaoMing1 = { name: '小明' };
var xiaoMing2 = { name: '小明' }; xiaoMing1 === xiaoMing2; // false 复制代码

new 构造函数

能够经过关键词new调用javascript对象的构造函数来得到对象实例。好比：

1. 建立内置对象实例

var o = new Object();
复制代码

2. 建立自定义对象实例

function Person(name) {
 this.name = name; }; new Person('Faker'); 复制代码

Object.create

Object.create用于建立一个对象，接受两个参数，使用语法以下；

Object.create(proto[, propertiesObject]);
复制代码

第一个参数proto用于指定新建立对象的原型；

第二个参数propertiesObject是新建立对象的属性名及属性描述符组成的对象。

proto能够指定为null，可是意味着新对象的原型是null，它不会继承Object的方法，好比toString()等。

propertiesObject参数与Object.defineProperties方法的第二个参数格式相同。

var 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);  }  } }); 复制代码

属性查询和设置

属性查询

属性查询也能够称为属性访问。在javascript中，对象属性查询很是灵活，支持点号查询，也支持字符串索引查询（之因此说是“字符串索引”，是由于写法看起像数组，索引是字符串而不是数字）。

经过点号加属性名访问属性的行为很像一些静态类型语言，如java，C等。属性名是javascript标识符，必须直接写在属性访问表达式中，不能动态访问。

var o = { name: '小明' };
o.name; // "小明" 复制代码

而根据字符串索引查询对象属性就比较灵活了，属性名就是字符串表达式的值，而一个表达式是能够接受变量的，这意味着能够动态访问属性，这赋予了javascript程序员很大的灵活性。下面是一个很简单的示例，而这种特性在业务实践中做用很大，好比深拷贝的实现，你每每不知道你要拷贝的对象中有哪些属性。

var o = { chineseName: '小明', englishName: 'XiaoMing' };
['chinese', 'english'].forEach(lang => {  var property = lang + 'Name';  console.log(o[property]); // 这里使用了字符串索引访问对象属性 }) 复制代码

对了，属性查询不只能够查询自由属性，也能够查询继承属性。

var protoObj = { age: 18 };
var o = Object.create(protoObj); o.age; // 18，这里访问的是原型属性，也就是继承获得的属性 复制代码

属性设置

经过属性访问表达式，咱们能够获得属性的引用，就能够据此设置属性了。这里主要注意一下只读属性和继承属性便可，细节再也不展开。

原型和继承

原型

前面也提到了，原型是实现继承的基础。那么如何去理解原型呢？

首先，要明确原型概念中的三角关系，三个主角分别是构造函数，原型，实例。我这里画了一张比较简单的图来帮助理解下。

原型三角关系

原型这东西吧，我感受“没人能帮你理解，只有你本身去试过才是懂了”。

不过这里说说我刚学习原型时的疑惑，疑惑的是为何构造函数有属性prototype指向原型，而实例又能够经过__proto__指向原型，究竟prototype和__proto__谁是原型？其实这明显是没有理解对象是按引用访问这个特色了。原型对象永远只有一个，它存储于堆内存中，而构造函数的prototype属性只是得到了原型的引用，经过这个引用能够操做原型。

一样地，__proto__也只是原型的引用，可是要注意了，__proto__不是ECMAScript规范里的东西，因此千万不要用在生产环境中。

至于为何不能够经过__proto__访问原型，缘由也很简单。经过实例直接得到了原型的访问和修改权限，这自己是一件很危险的事情。

举个例子，这里有一个类LatinDancer，意思是拉丁舞者。通过实例化操做，获得了多个拉丁舞者。

function LatinDancer(name) {
 this.name = name; }; LatinDancer.prototype.dance = function() {  console.log(this.name + '跳拉丁舞...'); }  var dancer1 = new LatinDancer('小明'); var dancer2 = new LatinDancer('小红'); var dancer3 = new LatinDancer('小王'); dancer1.dance(); // 小明跳拉丁舞... dancer2.dance(); // 小红跳拉丁舞... dancer3.dance(); // 小王跳拉丁舞... 复制代码

你们欢快地跳着拉丁舞，忽然小王这个家伙心血来潮，说：“我要作b-boy，我要跳Breaking”。因而，他私下改了原型方法dance()。

dancer3.__proto__.dance = function() {
  console.log(this.name + '跳breaking...');
}
复制代码dancer1.dance(); // 小明跳breaking... dancer2.dance(); // 小红跳breaking... dancer3.dance(); // 小王跳breaking... 复制代码

这个时候就不对劲了，小明和小红正跳着拉丁，忽然身体不受控制了，跳起了Breaking，内心暗骂：“沃尼玛，劳资不是跳拉丁的吗？”

看我表情

这里只是举个例子哈，没有对任何舞种或者舞者不敬的意思，抱歉抱歉。

因此，你们应该也明白了为何不能使用__proto__了吧。

原型链

在javascript中，任何对象都有原型，除了Object.prototype，它没有原型，或者说它的原型是null。

那么什么是原型链呢？javascript程序在查找一个对象的属性或方法时，会首先在对象自己上进行查找，若是找不到则会去对象的原型上进行查找。按照这样一个递归关系，若是原型上找不到，就会到原型的原型上找，这样一直查找下去，就会造成一个链，它的终点是null。

还要注意的一点是，构造函数也是一个对象，也存在原型，它的原型能够经过Function.prototype得到，而Function.prototype的原型则能够经过Object.prototype得到。

继承

说到继承，可能你们脑子里已经冒出来“原型链继承”，“借用构造函数继承”，“寄生式继承”，“原型式继承”，“寄生组合继承”这些概念了吧。说实话，一开始我也是这么记忆，可是发现好像不是那么容易理解啊。最后，我发现，只要从原型三角关系入手，就能理清实现继承的思路。

原型三角关系

咱们知道，对象实例能访问的属性和方法一共有三个来源，分别是：调用构造函数时挂载到实例上的属性，原型属性，对象实例化后自身新增的属性。

很明显，第三个来源不是用来作继承的，那么前两个来源用来作继承分别有什么优缺点呢？很明显，若是只基于其中一种来源作继承，都不可能全面地继承来自父类的属性或方法。

首先明确下继承中三个主体：父类，子类，子类实例。那么怎么才能让子类实例和父类搭上关系呢？

原型链继承

所谓继承，简单说就是能经过子类实例访问父类的属性和方法。而利用原型链能够达成这样的目的，因此只要父类原型、子类原型、子类实例造成原型链关系便可。

原型链继承

代码示例：

function Father() {
 this.nationality = 'Han'; }; Father.prototype.propA = '我是父类原型上的属性'; function Child() {}; Child.prototype = new Father(); Child.prototype.constructor = Child; // 修正原型上的constructor属性 Child.prototype.propB = '我是子类原型上的属性'; var child = new Child(); console.log(child.propA, child.propB, child.nationality); // 均可以访问到 child instanceof Father; // true 复制代码

能够看到，在上述代码中，咱们作了这样一个特殊处理Child.prototype.constructor = Child;。一方面是为了保证constructor的指向正确，毕竟实例由子类实例化得来，若是constructor指向父类构造函数也不太合适吧。另外一方面是为了防止某些方法显示调用constructor时带来的麻烦。具体解释见Why is it necessary to set the prototype constructor?

关键点：让子类原型成为父类的实例，子类实例也是父类的实例。

缺点：没法继承父类构造函数给实例挂载的属性。

借用构造函数

在调用子类构造函数时，经过call调用父类构造函数，同时指定this值。

function Father() {
 this.nationality = 'Han'; }; Father.prototype.propA = '我是父类原型上的属性'; function Child() {  Father.call(this); }; Child.prototype.propB = '我是子类原型上的属性'; var child = new Child(); console.log(child.propA, child.propB, child.nationality); 复制代码

这里的child.propA是undefined，由于子类实例不是父类的实例，没法继承父类原型属性。

child instanceof Father; // false
复制代码

关键点：构造函数的复用。

缺点：子类实例不是父类的实例，没法继承父类原型属性。

组合继承

所谓组合继承，就是综合上述两种方法。实现代码以下：

function Father() {
 this.nationality = 'Han'; }; Father.prototype.propA = '我是父类原型上的属性'; function Child() {  Father.call(this); }; Child.prototype = new Father(); Child.prototype.constructor = Child; // 修正原型上的constructor属性 Child.prototype.propB = '我是子类原型上的属性'; var child = new Child(); console.log(child.propA, child.propB, child.nationality); // 都能访问到 复制代码

一眼看上去没什么问题，可是Father()构造函数实际上是被调用了两次的。第一次发生在Child.prototype = new Father();，此时子类原型成为了父类实例，执行父类构造函数Father()时，得到了实例属性nationality；第二次发生在var child = new Child();，此时执行子类构造函数Child()，而Child()中经过call()调用了父类构造函数，因此子类实例也得到了实例属性nationality。这样理解起来可能有点晦涩难懂，咱们能够看看子类实例的对象结构：

组合继承的弊端

能够看到，子类实例和子类原型上都挂载了执行父类构造函数时得到的属性nationality。然而咱们作继承的目的是很单纯的，即“让子类继承父类属性和方法”，但并不该该给子类原型挂载没必要要的属性而致使污染子类原型。

有人会说“这么一点反作用怕什么”。固然，对于这么简单的父类而言，这种反作用微乎其微。假设父类有几百个属性或方法呢，这种白白耗费性能和内存的行为是有必要的吗？答案显而易见。

关键点：实例属性和原型属性都得以继承。

缺点：父类构造函数被执行了两次，污染了子类原型。

原型式继承

原型式继承是相对于原型链继承而言的，与原型链继承的不一样点在于，子类原型在建立时，不会执行父类构造函数，是一个纯粹的空对象。

function Father() {
 this.nationality = 'Han'; }; Father.prototype.propA = '我是父类原型上的属性'; function Child() {}; Child.prototype = Object.create(Father.prototype); Child.prototype.constructor = Child; // 修正原型上的constructor属性 Child.prototype.propB = '我是子类原型上的属性'; var child = new Child(); console.log(child.propA, child.propB, child.nationality); // 均可以访问到 child instanceof Father; // true 复制代码

在ES5以前，能够这样模拟Object.create：

function create(proto) {
 function F() {}  F.prototype = proto;  return new F(); } 复制代码

关键点：利用一个空对象过渡，解除子类原型和父类构造函数的强关联关系。这也意味着继承能够是纯对象之间的继承，无需构造函数介入。

缺点：没法继承父类构造函数给实例挂载的属性，这一点和原型链继承并没有差别。

寄生式继承

寄生式继承有借鉴工厂函数的设计模式，将继承的过程封装到一个函数中并返回对象，而且能够在函数中扩展对象方法或属性。

var obj = {
 nationality: 'Han' }; function inherit(proto) {  var o = Object.create(proto);  o.extendFunc = function(a, b) {  return a + b;  }  return o; } var inheritObj = inherit(obj); 复制代码

这里inheritObj不只继承了obj，并且也扩展了extendFunc方法。

关键点：工厂函数，封装过程函数化。

缺点：若是在工厂函数中扩展对象属性或方法，没法获得复用。

寄生组合继承

用以解决组合继承过程当中存在的“父类构造函数屡次被调用”问题。

function inherit(childType, fatherType) {
 childType.prototype = Object.create(fatherType.prototype);  childType.prototype.constructor = childType; }  function Father() {  this.nationality = 'Han'; } Father.prototype.propA = '我是父类原型上的属性'; function Child() {} inherit(Child, Father); // 继承 Child.prototype.propB = '我是子类原型上的属性'; var child = new Child(); console.log(child); 复制代码

关键点：解决父类构造函数屡次执行的问题，同时让子类原型变得更加纯粹。

静态方法

何谓“静态方法”？静态方法为类全部，不归属于任何一个实例，须要经过类名直接调用。

function Child() {}
Child.staticMethod = function() { console.log("我是一个静态方法") } var child = new Child(); Child.staticMethod(); // "我是一个静态方法" child.staticMethod(); // Uncaught TypeError: child.staticMethod is not a function 复制代码

Object类有不少的静态方法，我学习的时候习惯把它们分为这么几类（固然，这里没有所有列举开来，只挑了常见的方法）。

建立和复制对象

• Object.create()：基于原型和属性描述符集合建立一个新对象。

• Object.assign()：合并多个对象，会影响源对象。因此在合并对象时，为了不这个问题，通常会这样作：

var mergedObj = Object.assign({}, a, b);
复制代码

属性相关

• Object.defineProperty：经过属性描述符来定义或修改对象属性，主要涉及value, configurable, writable, enumerable四个特性。

• Object.defineProperties：是defineProperty的升级版本，一次性定义或修改多个属性。

• Object.getOwnPropertyDescriptor：获取属性描述符，是一个对象，包含value, configurable, writable, enumerable四个特性。

• Object.getOwnPropertyNames：返回一个由指定对象的全部自身属性的属性名（包括不可枚举属性但不包括Symbol值做为名称的属性）组成的数组。

• Object.keys：会返回一个由一个给定对象的自身可枚举属性组成的数组，与getOwnPropertyNames最大的不一样点在于：keys只返回enumerable为true的属性，而且会返回原型对象上的属性。

原型相关

• Object.getPrototypeOf：返回指定对象的原型。

function Child() {}
var child = new Child(); Object.getPrototypeOf(child) === Child.prototype; // true 复制代码

• Object.setPrototypeOf：设置指定对象的原型。这是一个比较危险的动做，同时也是一个性能不佳的方法，不推荐使用。

行为控制

如下列举的这三个方式是一个递进的关系，咱们按序来看：

• Object.preventExtensions：让一个对象变的不可扩展，也就是永远不能再添加新的属性。

• Object.seal：封闭一个对象，阻止添加新属性并将全部现有属性标记为不可配置。也就是说Object.seal在Object.preventExtensions的基础上，给对象属性都设置了configurable为false。

这里有一个坑是：对于configurable为false的属性，虽然不能从新设置它的configurable和enumerable特性，可是能够把它的writable特性从true改成false（反之不行）。

• Object.freeze：冻结一个对象，不能新增，修改，删除属性，也不能修改属性的原型。这里还有一个深冻结 deepFreeze的概念，有点相似深拷贝的意思，递归冻结。

检测能力

• Object.isExtensible：检测对象是否可扩展。

• Object.isSealed：检测对象是否被封闭。

• Object.isFrozen：检测对象是否被冻结。

兼容性差

• Object.entries

• Object.values

• Object.fromEntries

原型方法

原型方法是指挂载在原型对象上的方法，能够经过实例调用，本质上是借助原型对象调用。例如：

function Child() {}
Child.prototype.protoMethod = function() { console.log("我是一个原型方法") } var child = new Child(); child.protoMethod(); // "我是一个原型方法" 复制代码

ECMAScript给Object定义了不少原型方法。

Object原型方法

hasOwnProperty

该方法会返回一个布尔值，指示对象自身属性中是否具备指定的属性（也就是，是否有指定的键），常配合for ... in语句一块儿使用，用来遍历对象自身可枚举属性。

isPrototypeOf

该方法用于测试一个对象是否存在于另外一个对象的原型链上。Object.prototype.isPrototypeOf与Object.getPrototypeOf不一样点在于：

• Object.prototype.isPrototypeOf判断的是原型链关系，而且返回一个布尔值。

• Object.getPrototypeOf是获取目标对象的直接原型，返回的是目标对象的原型对象

PropertyIsEnumerable

该方法返回一个布尔值，表示指定的属性是否可枚举。它检测的是对象属性的enumerable特性。

valueOf & toString

对象转原始值会用到的方法，以前写过一篇笔记，具体见js数据类型很简单，却也不简单。

toLocaleString

toLocaleString方法返回一个该对象的字符串表示。此方法被用于派生对象为了特定语言环境的目的（locale-specific purposes）而重载使用。常见于日期对象。

最后

经过阅读本文，读者们能够对Javascript对象有一个基本的认识。对象是Javascript中很是复杂的部分，绝非一篇笔记或一张思惟导图可囊括，诸多细节不便展开，可关注我留言交流，回复“思惟导图”可获取我整理的思惟导图。

关注&交流