根据自己手绘的简图更进一步理解JavaScript的原型链机制

原型与隐式原型

概念

1. 原型：所有的 函数 都有一个属性名叫做prototype的属性；这个属性的值是一个对象；这个属性就是原型。
2. 隐式原型：所有的 对象 都有一个叫做__proto__的属性；它的属性值又是一个普通的对象；这就是隐式原型。

谈到隐式原型，它是以双下划线开头和结尾的，表示它是私有的，不公开的。 它原本不是 ES 的标准，无奈众多浏览器早早地都实现了这个属性，而且应用得还挺广泛的。ES 为了向下兼容性只好接纳它成为标准的一部分，是一个典型的现实倒逼标准的例子。

函数的特殊性

函数既有prototype又有__proto__

原型与隐式原型之间的关系

如果对象 f1 是由构造器 F 所创建的，那么如下关系成立：
f1.__proto__===F.prototype
即 对象的隐式原型 指向创建这个对象的构造器的 原型对象。

原型链

JavaScript 是基于原型的语言。当我们调用一个对象的属性时，如果对象没有该属性，JavaScript 解释器就会从对象的原型对象上去找该属性，如果原型上也没有该属性，那就去找原型的原型。这种属性查找的方式被称为原型链（prototype chain）。

JavaScript中的两条链

• 作用域链：作用是确定函数中变量的值。
• 原型链：作用是确定对象的属性的值。

当然属性的本质上也是变量，之所以称为属性是因为它属于某一个对象

在JavaScript设计之初是没有类的概念的（ES6之前），原型系统确是最初就有的语言设计。原型链的设计就是为了能够让多个实例对象可以共享一些相同的属性和方法，模拟继承的方式。
原型继承经常被视为JavaScript的一个弱点，但事实上原型继承模型比经典的继承模型可能更强大。从某种程度上说，它是更加纯粹的面向对象设计（区别于其他编程语言的面向类的设计），毕竟在JavaScript中一切皆是对象。

图解原型链

PrototypeChain

概述

以f1为例，假设现在要访问对象 f1 的 a 属性，即通过 f1.a 或者是 f1[a]来访问这个属性。它会按如下步骤去找这个 a 属性：

第一步：在 f1 对象的自有属性中找，如果找到 a，则返回 f1.a，如果找不到，则进入第二步。

第二步：通过 f1 对象的隐式原型指向构造 f1 的函数 Fun 的原型对象即Fun.prototype，如果在这里找到了属性 a ，则返回 f1.__proto__.a， 如果找不到，则继续下一步。

第三步： f1.__proto__即 Fun.prototype这个对象本身是一个对象，它应该是由内置对象构造器Object构造的，那么它的隐式原型指向的就是这个对象构造器的原型即Object.protoype，在这里要继续查询属性 a ，如果找到了则返回f1.__proto__.__proto__.a，如果找不到，则继续：

第四步：f1.__proto__.__proto__即 Object.protoype 这个对象的隐式原型指向的这个对象本身的构造器的原型对象即Object.protoype.__proto__去找，发现为null，即到达了原型链的顶部，而且还没有找到属性 a ，则返回 undefined。

整个查找 a 属性的过程，是按一个链式结构在找，这个链就是原型链。
由于原型链的存在，它的查找是自发的过程，中间的__proto__可以都省略掉。

代码验证

测试代码

同理可得另外两个例子的代码验证：

要点1：对象是由函数创造的 - 构造器

• 在JavaScript中，函数 可以用来创建对象（区别于其他面向对象的程序设计中，能够创建对象的叫类，ES6之前JS还没有类的概念），用于创建创建对象的 函数 就称为 构造器（constructor）。
• 函数 如果希望当做构造器来用，需要在前面加 new 关键字；不加new就是普通函数调用。
• 任何函数都可以当做构造器使用，前面加 new 即可
• 一般约定打算作为构造器用的函数，首字母大写
• 获取创建对象的构造器的方法:
  对象.__proto__.constructor

要点2：构造函数的原型对象中有个属性指向构造函数本身

构造函数.prototype.constructor === 构造函数

要点3：原型链终点

根据定义，null 没有 prototype，并作为这个原型链的最后一个环节。根据验证Object.prototype的隐式原型指向的就是null；所以说JavaScript中几乎所有的对象都是位于原型链顶端的Object的实例。

以上就是我对JavaScript中原型链的理解以及小结如有错误望告知！不胜感激🤓