十分钟看懂JS原型和原型链

た入场券 2022-12-26 10:23 207阅读 0赞

## 原型链图表 ##

![3d5192b9018824552c7f01c9645ae3b6.png][]

**基础的原型链图就是这样，是不是看起来很绕呢，下面来进行一一讲解**

## 原型（`prototype`） ##

*  JS所有的函数都有prototype属性，只有函数才有
 *  其属性和方法都能被构造函数实例化的对象所共同访问

![4f2cfcac5679e48fd877bbbf1425e32f.png][]

![62ef41860be4beac367b2bd570f42653.png][]

从这个例子中可以看到 Person 这个原型链上的方法（sayHello）可以被实例化出来的对象p1所调用。而当我们删除了 Person 原型链上的方法时，在p1上就调用不到 sayHello 这个方法了

## 构造器（`constructor`） ##

*  `constructor`存在于每个函数的`prototype`属性中，其指向了函数本身

![819f2ad1b87f0b9c4c0b8ebdc3786474.png][]

## 原型链 (`_proto_`） ##

*  JS中的对象会有个`_proto_`属性，指向了创建他的构造函数的`prototype`,而函数比较特殊也有这个属性

![014557026ece380a6d68404dcf702589.png][]

可以看出由Person这个函数实例化出的对象p1的_proto_ 是指向构造函数 Person 的 prototype

*  当JS搜索引擎查找对象中的属性或者方法时，如果在该对象上没有该属性和方法的话，会通过原型链一层一层往上查找

![fe488ff28c37622b5283ab74e5392aa9.png][]

从这里我们可以看出p1上是没有 sayHello 这个方法的 但是通过原型链往上查找就可以找到这个方法

## 实现一个简单的原型链 ##

![b673ed1068307a8e1b4cd02ec39c6741.png][]

### 最后 ###

说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

我可以将最近整理的前端面试题免费分享出来，其中包含**HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法**等等，还在持续整理更新中，希望大家都能找到心仪的工作。

### 有需要的朋友[**点击这里免费领取题目+解析PDF。**][PDF] ###

**篇幅有限，仅展示部分截图：**

![ff6b8e636a356a01389cd2de0211d347.png][]

![b24f32dd81ead796fa80c27c763d262c.png][]

![c6265dc2681708533916a8d7910506b3.png][]

## [**点击这里免费领取题目+解析PDF。**][PDF] ##

[3d5192b9018824552c7f01c9645ae3b6.png]: /images/20221120/270f78dae1f84424bacd1207181bdbd7.png
[4f2cfcac5679e48fd877bbbf1425e32f.png]: /images/20221120/b3b86039f1104dbd9d3ac0d0c6f3636b.png
[62ef41860be4beac367b2bd570f42653.png]: /images/20221120/acf2ceb8b10d45e0a8c4dde4144f299f.png
[819f2ad1b87f0b9c4c0b8ebdc3786474.png]: /images/20221120/b21861e1984b4cc5ab092bde00c41faf.png
[014557026ece380a6d68404dcf702589.png]: /images/20221120/c68059369ea04edbbeddea8239c6fd4d.png
[fe488ff28c37622b5283ab74e5392aa9.png]: /images/20221120/dd6908f86c1f4aa499a30cea7f1301b7.png
[b673ed1068307a8e1b4cd02ec39c6741.png]: /images/20221120/74fc626665c748e48e9faf6bc5e1d386.png
[PDF]: https://links.jianshu.com/go?to=https%3A%2F%2Fjq.qq.com%2F%3F_wv%3D1027%26k%3DhCLQP3CQ
[ff6b8e636a356a01389cd2de0211d347.png]: /images/20221120/28559b4e75ec4892a958c66bd88c96e5.png
[b24f32dd81ead796fa80c27c763d262c.png]: /images/20221120/65bdfe46af364944abdbfce0d56c0884.png
[c6265dc2681708533916a8d7910506b3.png]: /images/20221120/91f387c3e7584b82adbc36f16461ee65.png