一图了解原型链

前言：

每个函数创建时，都会按照特定的规则：

1. 创建一个prototype属性（指向原型对象）；

2. 默认情况下，所有原型对象会自动获得一个 constructor属性，指向与之关联的构造函数；

3. 自定义构造函数时，原型对象**会默认获得constructor属性，其他所有方法都继承自Object；

4. 每次调用构造函数创建新实例，实例内部的[[Prototype]]指针就会被赋值为构造函数的原型对象，脚本中没有访问该特性的方法，但在Safari、Chrome、Firefox中会在每个对象上暴露__proto__属性，能通过这个属性访问对象的原型；

functon Foo(){}
let f1 = new foo();
let f2 = new foo();

[图片上传失败...(image-2df68f-1619447723275)]

1. 构造函数<mark>Foo()</mark>

   构造函数Foo其原型属性prototype指向其原型对象Foo.prototype。原型对象Foo.prototype的默认属性constructor指向原函数Foo。

   console.log(Foo.prototype)
   

   image.png

构造函数Foo的实例f1,f2，其__proto__属性指向其构造函数的原型对象Foo.prototype，所以实例能共享原型对象上的属性和方法。

console.log(f1.__proto__, 'f1.__proto__');
console.log(Foo.prototype, 'Foo.prototype');
console.log(f1.__proto__ === Foo.prototype); // true

image.png

构造函数Foo是Funciton函数创建的实例，所以其__proto__属性指向的是Function函数的原型对象Function.prototype。

console.log(Foo.__proto__, 'Foo.__proto__');
console.log(Function.prototype, 'Function.prototype');
console.log(Foo.__proto__ === Function.prototype); // true

image.png

构造函数Foo的原型对象Foo.prototype（本质上是一个对象），是Object创建的一个实例，因此其__proto__属性指向Object的原型对象Object.prototype。

console.log(Foo.prototype.__proto__, 'Foo.prototype.__proto__');
console.log(Object.prototype,'Object.prototype');
console.log(Foo.prototype.__proto__ === Object.prototype) // true

image.png

2. Function函数

   所有的函数其实都是Function函数的实例，所以所有的函数的__protot__属性都指向Function.prototype。

   因为Function函数实例化了它本身，所以Function.__protot__就等于Function.prototype。

   console.log(Function.__proto__, 'Function.__proto__');
   console.log(Function.prototype, 'Function.prototype');
   console.log(Function.__proto__ === Function.prototype) // true
   

   image.png

   Function函数的原型对象是Object函数创建的实例，因此Function.prototype.__proto__，指向的是Object的原型对象Object.prototype

   console.log(Function.prototype.__proto__, 'Function.prototype.__proto__');
   console.log(Object.prototype, 'Object.prototype');
   console.log(Function.prototype.__proto__ === Object.prototype) // true
   

   image.png

3. Object函数

   Object函数实际上是Function函数创建的实例，其__proto__属性指向的就是Function函数的原型对象Function.prototype。

   需要注意的是Object.prototype的__proto__终止于null

   console.log(Object.prototype.__proto__, 'Object.prototype.__proto__');
   

    ![image.png](https://img.haomeiwen.com/i10868925/c1c82c57d52764bf.image?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
   

如果上述有什么不对的地方，可以在下方留言评论告知哦！

纯手打，请各位大佬给我点个赞！感谢！

image.png