JS进阶-原型链
本文最后更新于538 天前,其中的信息可能已经过时,如有错误请发送邮件到1986413837@qq.com

什么是原型?

JavaScript规定 每一个构造函数都有一个prototype属性 指向另一个对象 我们也称为原型对象 这个对象可以挂载函数

这样所有根据这个构造函数实例化出来的对象都可以调用这个函数 (不会产生资源浪费) 下图简单说明了为什么之前的构造函数方法会存在资源浪费

利用原型对象 我们可以将公共的属性写在构造函数里 将公共的方法写在原型对象身上

this的指向

构造函数和原型对象中的this都指向实例化的对象

constructor属性

在上一张图片中 我们看到在原型对象中包含了一个construct属性 那么这个属性有什么作用呢?

答案是通过constructor属性再重新指回创造这个原型对象的构造函数

列举一个使用场景:

如果有多个对象的方法 ,可以给原型对象采取对象形式赋值 ,但这样就会覆盖构造函数原型对象原来的内容,这样修改后的原型对象constructor就不再指向当前构造函数了 此时我们可以在修改后的原型对象中添加一个constructor指向原来的构造函数

如图所示 赋值后constructor不再指向构造函数 我们需要重新进行指向(Just Add One Sentence)

注意:

每个原型对象里都有一个constructor属性 指向该原型对象的构造函数

为什么实例化的对象可以调用原型对象上挂载的函数?

对象原型

每一个对象都会有一个属性__proto__/[ [ prototype ] ] 指向构造函数的prototype原型对象

因为有对象原型的指向 使得实例化对象与原型对象上的函数产生了联系

构造函数 实例对象 原型对象之间的关系

介绍完对象原型之后 我们可以发现构造函数,实例化对象和原型对象这三者之间有着密切的关系

构造函数存在一个prototype属性指向原型对象

原型对象存在construct属性指向构造函数

构造函数实例化一个具体对象

这个具体对象存在__proto__属性指向原型对象

可以用下图表示三者之间的关系

原型链

前面铺垫了这么多知识就是为了原型链做铺垫

思考

既然每个对象都会有一个__proto__属性 指向其构造函数的原型对象 那么我们的原型对象也是一个对象 应该也会指向其构造函数的原型对象 而一个对象正是由Object 实例化而成的 所以我们的原型对象__proto__就又会指向Object.prototype 这样就形象地形成了一个链状结构

基于原型对象的继承使得不同构造函数的原型对象关联在一起,并且这种关联的关系是一种链状的结构,我们将原型对象的链状结构关系称为原型链

原型链示例如下

简单总结一下:

原型链是一种查找规则

只要有原型对象就有constructor

只要是对象就有__proto__

可以用instanceof运算符判断对象是否从属于更高级的对象

原型链查找规则

这些就是原型链的基本内容啦~原型链在面试中会经常问到哦~

下一章见^_^

Life's a struggle, I'll conquer it.
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇