这是我参与8月更文挑战的第26天,活动详情查看:8月更文挑战
祖传原型链图
先来张祖传原型链图,是不是很熟悉?这个图呢咱先放一放(就拿出来吸口灵气用的哈哈哈),在讲解这个之前先介绍几个相关重要的概念
第一个重要概念
介绍原型链之前,先通过一个例子介绍三个概念:实例对象、构造函数、原型对象
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.prototype
、Function.prototype
)也都是对象(不要看着图上画的是Foo.prototype
、Function.prototype
就以为它不是对象了),换个问题:那么对象的原型对象指向哪里呢?
相信聪明的你已经知道了,因为对象是由Object构造函数创建的,所以对象的原型对象是Object.prototype
,Foo.prototype
、Function.prototype
的__proto__
属性是指向Object.prototype
的
那么就有了以下的规则出现
Foo.prototype.__proto__ === Object.prototype // true
Function.prototype.__proto__ === Object.prototype // true
第四个概念
食物链有顶端,那么原型链也有顶端,那就是Object.prototype
,Object.prototype
的原型对象是null
,再往上就没有。(如果需要找对象身上的属性,找到这里还没有,那么返回undefined
)
所以有下面这一条规则
Object.prototype.__proto__ === null // true
小结
还有最最最重要的手撕祖传原型链图那就放在明天讲解吧!!!😂
当然,有什么可以改进的地方也欢迎指正✍