JavaScript深入解析原型到原型链

原型
我们知道在每一个JavaScript函数中都有一个prototype 属性，相信我们在文章、书籍中的各个例子都可以看到，例如

function fun() {}
// prototype是函数才会有的属性
fun.prototype.name = 'vhome';
const fun1 = new fun(),
      fun2 = new fun();
console.log(fun1.name) // vhome
console.log(fun2.name) // vhome
1
2
3
4
5
6
7

输出name值为fun.prototype.name，相信大家也大概能推测函数的prototype指向两个实例的的原型（下面会解释到），也即是函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型，

那什么是原型呢？
每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型"继承"属性，接下来我们来讲解几个关键属性：

1. 原型（prototype）又称显式原型

   该属性只存在于函数（类）

2. （proto）又称隐式原型
   这是每一个JavaScript对象(除了 null )都具有的一个属性，叫__proto__，这个属性会指向该对象的原型（显式原型）。

3. （constructor）构造器
   每个原型(prototype)都有一个 constructor 属性指向关联的构造函数

三者关系如下图所示

结合这个关系图，我们再来解析一下下面这段代码：

function fun() {}
// prototype是函数才会有的属性
fun.prototype.name = 'vhome';
const fun1 = new Worker()；
fun1.name = 'v1home'
console.log(fun1.name) // v1home
delete fun1.name
console.log(fun1.name) // vhome
1
2
3
4
5
6
7
8

在这个代码块中，我们现时为worker新增了一个name的属性，然后打印了他的值，结果为v1home，但在我们删除fun1.name后，因无法读取到person的name属性，便会转向person的原型即是fun1.proto ，也就是 fun.prototype中查找，幸运的是我们找到了 name 属性，结果为 vhome。

但这里就会有个问题，原型上如果找不到呢，我们通过原型的原型去找是什么样的过程呢？
上面我们讲到原型是个对象，既然是对象，那我们肯定可以创建它，如下：

cosnt obj = new Object();
obj.name = 'vhome'
console.log(obj.name) // vhome
1
2
3

其实原型对象就是通过 Object 构造函数生成的，结合之前所讲，实例的 proto 指向构造函数的 prototype，且这个对象肯定也有对应的原型，那我们应该按照这条链路去找，下面我们就来讲讲这条链路（原型链）：

什么是原型链
由相互关联的原型组成的链状结构就是原型链，注意 Object.prototype.__proto__为null,我们知道null表示没有对象，即使Object.prototype 没有原型

下面是原型链图

结语
谢谢你的观看，JavaScript的原型、原型链是一个比较抽象的东西，要讲述好他并不容易，希望讲得不明白的地方，可以指出修改。