手撕祖传原型链图(上)

189 阅读2分钟

这是我参与8月更文挑战的第26天,活动详情查看:8月更文挑战

祖传原型链图

先来张祖传原型链图,是不是很熟悉?这个图呢咱先放一放(就拿出来吸口灵气用的哈哈哈),在讲解这个之前先介绍几个相关重要的概念

原型链.png

第一个重要概念

介绍原型链之前,先通过一个例子介绍三个概念:实例对象构造函数原型对象

function Foo(name) {
    this.name = name
}
​
const f1 = new Foo('zs')
  • 实例对象:通过构造函数new出来的,本例中的f1,有__proto__属性

  • 构造函数:Foo,(如果不使用new操作符的话,其实也是普通函数),有prototype属性

  • 原型对象:new操作符的执行过程中,会生成一个对象(能够生成桥梁连接对象构造函数),这里有一个关联的公式,很重要

    • 实例对象 的 __proto__ 属性 与 构造函数 的 prototype 属性 指向同一个原型对象
    • f1.__proto__ === Foo.prototype  // true
      

上面祖传的图片都将围绕这一个定律进行展开、扩展!!!所以这一定律很重要,是熟悉原型链的基本必要知识!!! (我这样能体现出这条定律的重要性吗???)

第二个重要概念

函数也是对象,所有的函数都是对象,function Object()function Foo()function Function()等等一系列的函数既是对象也是函数!这就意味着函数也有实例对象的__proto__属性,可以进而得到这些函数对象是由构造函数Function构造而来

所以出现下面这种盛况,所有的函数的原型对象都是Function.prototype,包括Object和Function,记住函数(万物)也是对象

Foo.__proto__ === Function.prototype    // true
Object.__proto__ === Function.prototype // true
Function.__proto__ === Function.prototype // true

第三个概念

所有的原型对象(Foo.prototypeFunction.prototype)也都是对象(不要看着图上画的是Foo.prototypeFunction.prototype就以为它不是对象了),换个问题:那么对象的原型对象指向哪里呢?

相信聪明的你已经知道了,因为对象是由Object构造函数创建的,所以对象的原型对象是Object.prototypeFoo.prototypeFunction.prototype__proto__属性是指向Object.prototype

那么就有了以下的规则出现

Foo.prototype.__proto__ === Object.prototype // true
Function.prototype.__proto__ === Object.prototype   // true

第四个概念

食物链有顶端,那么原型链也有顶端,那就是Object.prototypeObject.prototype的原型对象是null,再往上就没有。(如果需要找对象身上的属性,找到这里还没有,那么返回undefined

所以有下面这一条规则

Object.prototype.__proto__ === null // true

小结

还有最最最重要的手撕祖传原型链图那就放在明天讲解吧!!!😂

当然,有什么可以改进的地方也欢迎指正✍