prototype、__proto__和constructor个人理解

172 阅读1分钟

这是个老生常谈的问题了,作为一个前端怎么都绕不开的话题,最近在面试中也被频繁问到,自己也看过很多这方面的文章和书籍讲解,刚开始也是被各种关系给绕晕,所以看完一定要自己去总结一下,这样才能真正的理解。

先上一个刚画的图

image-20210321150902219.png

看不懂没关系,我们一点一点来理解

首先要明确几点:

  1. 在JS里面,万物皆对象,函数是对象,函数的原型也是对象。对象都有个__proto__属性,该属性的值表示构造该对象的构造函数的原型(是不是感觉有点不好理解,不理解请看上图第一向下的箭头)
  2. 上面说到函数是对象,所以他也有__proto__属性,同时他也有自己的原型属性prototype,这个属性又是一个对象,包含实例共享的属性和方法,因为是个对象,所以根据上面一条,当然有个__proto__属性,同时还有一个constructor属性,指回构造函数

把上面两点看懂了再看图就很好理解了

  • Fn()是构造函数,fn是实例对象,所以
fn.__proto__ === Fn.prototype
fn.constructor === Fn
Fn.prototype.constructor === Fn

即为这部分的图(其实右边也同理)

image-20210321150944324.png

  • 根据第二点,Fn也是个对象,有__proto__
      Fn.__proto__ === Function.prototype
      Fn.constructor === Function
  • 原型对象也是个对象,同理可得
      Fn.prototype.__proto__ === Object.prototype
      Object.prototype.__proto__ === null

最后Object.prototype.__proto__指向null

精简总结

  • 对象有__proto__属性,指向构造函数的原型
  • 方法除了有proto,还有prototype指向该方法原型对象
  • constructor返回创建实例对象的构造函数的引用

以上为个人理解,如有错误请指出,感谢~