JavaScript 解释原型链（原型继承）

一直致力于使用ES6写ReactNative，对之前的Javascript了解较层面。所以，趁疫情机会抽出时间来对JavaScript 解释原型链（原型继承）深入理解下。

·原型(prototype): 一个简单的对象，用于实现对象的属性与能力的继承。在 Firefox 和 Chrome 中，每个JavaScript对象中都包含一个__proto__ (非标准)的属性指向它的父亲(该对象的原型)，以obj.__proto__进行访问。
·构造函数: 可以通过new来 新建一个对象 的函数。
·实例: 通过构造函数和new创建出来的对象，便是实例。 实例通过__proto__指向原型，通过constructor指向构造函数。

上面的这张图我觉得是具有非凡意义的，能够系统直观的给我们展示JS原型继承系统的模式。

遵照上图手动编写对应的代码，并执行来验证上面的图所带给我们的意义！
图示有表示：对象实例 f1 的原型指针(_proto) 指向原型对象

在VSCode 终端(node环境下)执行命令：node .\JS-Test\js-test.js

可以看到，图示和编码验证是一致的。

图示有表示：每个构造函数(Foo)都有一个原型对象(prototype)，原型对象(Foo.prototype)都包含一个指向构造函数的指针(constructor)
承接上面的验证，继续编写代码第8、9行 ~

在VSCode 终端(node环境下)执行命令：node .\JS-Test\js-test.js

可以看到，图示和编码验证依然是一致的。

图示上来看，Foo.prototype 是 Object 的对象实例
即 Foo.prototype的原型指针 指向 Object.prototype
承接上面的验证，继续编写代码第11、12和13行 ~

在VSCode 终端(node环境下)执行命令：node .\JS-Test\js-test.js

可以看到，图示和编码验证依然是一致的。

图示上来看，JavaScript中的对象，追根溯源都是来自一个Null对象 ?
即Object.prototype 是 Null的对象实例[Object继承自Null]
承接上面的验证，继续编写代码第15、16和17行 ~

在VSCode 终端(node环境下)执行命令：node .\JS-Test\js-test.js

可以看到，图示和编码验证依然是一致的！

结合上图以及手动编码，突然产生了疑惑并在这里再次编码验证解疑：
什么疑惑？f1.prototype 和 Foo.prototype 有什么关系、区别!

在VSCode 终端(node环境下)执行命令：node .\JS-Test\js-test.js
由下面结果可以看到 f1.prototype 不存在，则f1.prototype.constructor也是不存在的！

function Foo() {}
let f1 = new Foo();

function MyFunction() {}
let mf1 = new MyFunction();

f1.prototype = mf1;
//MyFunction 隐式的 继承(extends) 了Object

从上面编码的验证，可知我们通过__proto__可以访问到它所继承的原型对象。
从上面的代码块，可知：
** 解释原型链 ** 如果我们让Foo的原型对象(f1.prtotype)等于MyFunction的对象实例，那么
一个函数(Foo)的原型对象(f1.prototype)将会包含(拥有)一个指向某函数原型(MyFunction.prototype)的原型指针(__proto__)，即f1.prototype.__proto__ === MyFunction.prototype 。相应的某函数原型(MyFunction.prototype)中也会有一个指向另外一个函数原型(Object.prototype)的指针(__proto__); 此时如果MyFuction的原型对象(MyFunction.prototype)又变成另外一个函数的对象实例，那么这个原型链就被衔接住啦

参考文章：
参考https://juejin.im/entry
参考https://juejin.im/post
参考https://juejin.im/post