吊打前端专栏 | 吊打JavaScript之从原型到原型链

「爱情、让人受尽委屈。」 2021-08-26 22:53 300阅读 0赞

点击蓝色 “达达前端” 关注我哦!

加个 “星标” ，每天一篇文章，一起学编程

![format_png][]

**目录**

![format_png 1][]

**说一说原型模式**

每个函数都有一个 prototype 原型属性，这个属性它是一个指针，指向一个对象，而这个对象的用途是可以由特定类型的所有实例共享的属性和方法。则这个 prototype 就是通过调用构造函数而创建的那个对象实例的原型对象。

原型对象的好处就是让所有对象实例共享它所包含的属性和方法。

![format_png 2][]

由上述代码可知，构造函数为一个空函数，sayName()方法和所有属性直接添加到了Person的prototype属性中。

调用构造函数来创建新对象，这个新对象会具有相同的属性和方法。但是和构造函数不同的是，这个新对象的属性和方法是所有实例共享的。

就是，person1和person2访问的都是同一组属性和同一个sayName()函数。

**原型对象**

只要创建一个新函数，其内部就会创建一个 prototype 属性，这个属性指向函数的原型对象。而所有原型对象都会自动获得一个 constructor

构造函数 属性，这个属性指向prototype属性所在函数的指针。

示例：Person.protype.constructor指向Person。

![format_png 3][]

**JavaScript对象原型**

所有JavaScript对象都从原型继承属性和方法。学习如何使用对象构造器。

![format_png 4][]

您现在无法对已有的对象构造器添加新属性，如果要向构造器添加一个新属性，就要把它添加到构造函数里。

![format_png 5][]

**原型继承**

所有JavaScript对象都从原型继承属性和方法。日期对象继承来自Date.prototype。数组对象继承来自Arrray.prototype。

Person对象继承来自Person.prototype。Object.prototype位于原型继承链的顶端。

日期对象，数组对象和Person对象都继承来自Object.prototype。

**向对象添加属性和方法**

需求一，当需要向所有给定类型的已有对象添加新属性，或者是方法。

需求二，当需要向对象构造器添加新属性，或者是是方法。

**使用prototype属性**

JavaScript中的prototype属性允许你为对象构造器添加新属性，或者是方法。

![format_png 6][]

![format_png 7][]

创建了构造函数后，其原型对象会取得 constructor属性，至于其他方法，都是从Object继承来的，当调用构造函数创建一个新实例后，该实例的内部包含一个指针，指向构造函数的原型对象。

这个指针就叫prototype，每个对象上都有一个属性叫 \_\_proto\_\_。注意的是这个指针存在于实例与构造函数的原型对象之间，不是存在于实例与构造函数之间。

你可以把Person构造函数，Person的原型属性，和Person的两个实例之间的关系结构画出来分析分析。

一个Person构造函数有一个prototype。指向了原型对象，Person Prototype。

一个Person Prototype中有constructor，name，age，job，sayName。而Person.prototype.constructor又指回了Person。

原型对象中除了包含一个constructor属性外，还有后来添加的其他属性。

Person的每个实例都有一个内部属性，该属性仅仅指向了Person.prototype，严格说，它们和构造函数没有直接关系。

![format_png 8][]

重点之一，当调用构造函数创建一个新实例后，该实例的内部将包含一个指针，指向构造函数的原型对象，这个指针叫\[\[Prototype\]\]。在每个对象上都支持一个属性\_\_proto\_\_。

**讲解概念**

什么是对象？对象就是属性和方法的集合，即变量和函数的封装，每个对象都有一个\_\_proto\_\_属性，指向这个对象的构造函数的原型对象。

什么是构造函数？构造函数就是用于创建对象的函数，通过new关键字的方法生成对象，函数名一般首字母大写。

什么是原型对象？每个函数都有一个prototype属性，它是一个指向原型对象的指针，原型对象在定义函数时同时被创建。

**对象中的\_\_proto\_\_属性**

![format_png 9][]

对象中的\_\_proto\_\_属性在所有实现中都是无法访问到的，但是可以通过 isPrototypeOf()方法来确定对象之间是否存在这种关系。

![format_png 10][]

person1和person2中内部有一个指向Person.prototype的指针，返回就是true了。

在ECMAScript5中增加了一个新的方法，叫

Object.getPrototypeOf()，在所有支持的实现中，这个方法返回\[\[Prototype\]\]的值。

**所以有示例如下：**

![format_png 11][]

确认Object.getPrototypeOf()返回的对象实际是这对象的原型，使用Object.getPrototypeOf()可以方便地取得一个对象的原型。

代码调用过程，调用对象的某个属性时，会首先搜索从对象实例本身开始，如果找到了给定名字的属性，则返回该属性的值，如果没有找到。

会第二次搜索，从指针指向的原型对象开始，在原型对象中查找给定名字的属性，如果在原型对象中查找具有给定名字的属性，就返回该属性值。

简单来说，解析器会有两问，第一次找到就一问。

第一问：实例person1有sayName属性吗？第二问：实例person1的原型有sayName属性吗？

虽然可以通过对象实例访问保存在原型中的值，但却不能通过对象实例重写原型中的值。

![format_png 12][]

**注意：****person1的name被一个新值给屏蔽了。**

person1.name返回的值来自对象实例；person2.name的取值来自原型。访问person1.name时，在实例上搜索这个名为name的属性，存在，则返回其值。

访问person2.name时，在实例上没有该属性，就会在原型上搜索，如果有该name属性，则返回其值。

为对象添加一个属性，这个属性会屏蔽掉原型对象中相同的属性名。添加一个属性，只会阻止我们访问原型对象中的那个属性，不会改变那个属性，而是访问实例对象上的属性。

接下来使用delete操作符删除实例属性试试，看看能否重新访问到原型中的属性。

![format_png 13][]

![format_png 14][]

使用delete操作符，把保存的值删除了，恢复了对原型中的name属性的连接。

**如何判断一个属性是否存在于实例中呢，还是存在于原型中呢？**

我们可以使用hasOwnProperty()方法来给指定属性判断是否存在于对象实例中，存在对象实例中时，返回值为true。

![format_png 15][]

由以上代码可以知道，通过使用hasOwnProperty()方法，我们知道什么时候访问的是实例属性，什么时候访问的是原型属性。

**使用in操作符**

in操作符用来判断在通过对象能够访问给定属性时，返回为true。无论是该属性是在实例中还是在原型中。

![format_png 16][]

同时使用hasOwnProperty()方法和In操作符，就可以确定该属性到底是存在于对象中，还是存在于原型中。

![format_png 17][]

上述代码用来判断属性存在于原型中。

描述，in操作符通过对象能够访问到属性就返回true，hasOwnProperty()只要属性存在于实例中时才返回true。

所以只要in操作符返回true而hasOwnProperty()返回false，就可以确定属性是原型中的属性。

![format_png 18][]

要取得对象上所有可枚举的实例属性，可使用Object.keys()方法，这个方法接收一个对象作为参数，返回一个包含所有可枚举属性的字符串数组。

![format_png 19][]

可以看出，Object.keys()方法保存的是一个数组，循环顺序的出现，如果有Person的实例调用，那么出现的实例中的属性。

如果要出现所有实例属性，无论它是否可以枚举，都可以使用

Object.getOwnPropertyNames()方法。

![format_png 20][]

返回结果中包含不可枚举的constructor属性。

![format_png 21][]

使用这个方法创建，以对象字面量创建新对象的形式，缺少了constructor属性的指向，不再指向Person了，每个函数新创建，就会同时创建一个prototype对象，这个对象会自动获得一个constructor属性。

此时constructor属性变成了新对象的constructor属性，指向的是Object构造函数，不再指向Person函数。

![format_png 22][]

如果想要保留constructor的指向，可以这样表示。

![format_png 23][]

这样做，constructor属性会导致\[\[Enumerable\]\]的特性为true，默认情况下，原生的constructor属性是不可以枚举的。

重新设置构造函数，让constructor保持不可枚举。

![format_png 24][]

上述代码就可以了，只适用于ESMAScript5兼容的浏览器。

![format_png 25][]

friend.sayHi()调用可以进行访问。原因是实例与原型之间的松散连接的关系。实例与原型之间的连接只不过是一个指针，而不是一个副本，所以可以在原型中找到该想要的属性并返回保存在那里的函数。

![format_png 26][]

由上述代码，第一，先创建了一个Person的构造函数，空函数，第二，创建了一个Person的实例，第三，重写了其原型对象，调用friend.sayName()函数时发生了错误。

因为friend的指向是Object的构造函数，而不是再指向Person函数。

**原型模式的重要性**

可以在Array.prototype中找到sort()方法，在Sting.prototype中可以找到substring()方法。

![format_png 27][]

基本包装类型String

![format_png 28][]

上述代码不建议使用该操作。

**引用类型值的属性**

![format_png 29][]

**使用构造函数模式和原型模式**

构造函数模式用于定义实例属性，而原型模式用于定义方法和共享属性。

![format_png 30][]

有上述代码可以知道，在构造函数中定义实例属性，在原型中定义所有实例共享的属性constructor和方法sayName()。

在person1中添加内容，并不会影响到person2，因为它们分别引用了不同的数组。

**定义应用类型或者是创建自定义类型的方式，**使用组合的构造函数模式和原型模式。

![format_png 31][]

上述代码表示，只有sayName()方法不存在的情况下，才会将它添加到原型中。

**寄生构造函数模式**

![format_png 32][]

继承，关于继承，有两种继承方式，接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。

![format_png 33][]

原型Person.prototype，中constructor属性：

Person.prototype.constructor === Person，

在\_\_proto\_\_属性中：

Person.prototype.\_\_proto\_\_ == Object.prototype

构造函数，prototype属性指向其原型对象，constructor属性指向Function。

Person.constructor === Function

\_\_proto\_\_属性：

Person.\_\_proto\_\_ === Function.prototype

![format_png 34][]

通过字面量方式创建对象时，它的原型就是Object.prototype，我们无法直接访问内置属性\[\[Prototype\]\]，但是我们可以通过

Object.getPrototypeOf()或者是对象\_\_proto\_\_获取对象的原型。

创建对象的方式是使用Object.create()。这个方法会以你传入的对象作为创建出来的对象的原型。

![format_png 35][]

**什么是原型链？**

![format_png 36][]

由于\_\_proto\_\_是如何对象都有的属性，而js里万物皆对象，所以会形成一条\_\_proto\_\_连起来的链条，递归访问\_\_proto\_\_必须最终到头，并且值为null。

当js引擎查找对象的属性时，先查找对象本身是否存在该属性，如果不存在，会在原型链上查找，但不会查找自身的prototype。

继承的主要思路是利用原型链，原型链作为实现继承的主要方法，利用原型让一个引用类型继承另一个引用类型的属性和方法。

就是通过原型对象的constructor指向构造函数，实例对象通过\_\_proto\_\_指向原型对象。

![format_png 37][]

一层层地上溯，所有对象的原型最终都可以上溯到

Object.prototype，即Object构造函数的prototype属性。就是所有对象都继承了Object.prototype属性。

那么Object.prototype对象有没有它的原型呢？是有的，Object.prototype的原型就是Null。由于Null没有任何属性，就是原型链的尽头。

读取对象中的某个属性，JavaScript引擎先寻找对象本身的属性，如果找不到就到它的原型去找，如果还是找不到，就到原型的原型中去找。直到最顶层的Object.prototype时，还是找不到，则返回Undefined。

我做了一个示意图如下：

![format_png 38][]

当一个对象调用自身不存在的属性或者是方法时，就会去自己\[proto\]关联的前辈\[prototype\]对象上去找，如果没有找到，就会去该prototype原型\[proto\]关联的前辈\[prototype\]上去找。

以此类推，直到找到属性或者是方法或者是Undefined为止，这就是所谓的原型链。

![format_png 39][]

**总结：**

1.   每创建一个函数，该函数都会自动带有一个prototype属性，这个属性是一个指针，指向一个对象，该对象称为原型对象。
2.  原型对象上默认有一个属性为constructor，该属性也是一个指针，指向其相关联的构造函数。
3.  通过调用构造函数产生的实例对象，都有一个内部属性，指向了原型对象，其实例对象能够访问原型对象上的所有属性和方法。
4.  每个构造函数都有一个原型对象，原型对象上包含着一个指向构造函数的指针，而实例都包含着一个指向原型对象的内部指针。
5.  实例可以通过内部指针访问到原型对象，原型对象可以通过constructor找到构造函数。
6.  functions中有prototype，objects中有\_\_proto\_\_，prototype是函数才有的属性，\_\_proto\_\_是每个对象都有的属性，但\_\_proto\_\_不是一个规范属性，只是部分浏览器实现了此属性，对应的标准是\[\[Prototype\]\]
7.  大多数情况下，\_\_proto\_\_可以理解为“构造器的原型”，即：\_\_proto\_\_===constructor.prototype。
8.  \_\_proto\_\_的指向取决于对象创建时的实现方式。
9.  构造函数实例，封装的函数，如果通过new操作符来调用，就是构造函数，如果没有通过new操作符来调用的，就是普通函数。
10. 函数Person(对象)有一个属性prototype指针，指向原型对象，Person.prototype原型对象，实质也是对象，它有个属性constructor指针，又指向Person函数对象。
11. 实例对象person1有个属性\[\[Prototype\]\]（内部属性，chrome和firefix,Safari中这个属性叫\_\_proto\_\_）指向原型对象。
12. 可以通过实例对象的constructor访问构造函数，可以使用代码person1.constructor访问构造函数，但是constructor的本质是原型对象上的属性。
13. 所有对象都有valueOf和toString方法的原因就是从Object.prototype继承的。
14. 在整个原型链上寻找某个属性，对性能有影响的，越是上层的原型对象，对性能的影响就越大，如果寻找某个不存在的属性，将会遍历整个原型链。
15. js中一切都是对象，但是也区分普通对象和函数对象，通过new Function()出来的就是函数对象。普通对象的构造函数就是Object，而函数对象的构造函数就是Function。
16. Function prototype是一个空函数。
17. 每个对象都有\_\_proto\_\_属性，但是只有函数对象才有prototype属性。

**☆ END ☆**

参考文档来源：《JavaScript 高级程序设计》

#### 加群前端交流群 ####

扫码,备注 加群-技术领域-城市-姓名

![format_png 40][]

目前文章内容涉及前端知识点，囊括Vue、JavaScript、数据结构与算法、实战演练、Node全栈一线技术，紧跟业界发展步伐，将 Web前端领域、网络原理等通俗易懂的呈现给小伙伴。更多内容请到达达前端网站进行学习：www.dadaqianduan.cn

**推****荐****阅****读**

***1、***[你知道多少this，new，bind，call，apply？那我告诉你][this_new_bind_call_apply]

***2、***[为什么学习JavaScript设计模式，因为它是核心][JavaScript]

**3、**[一篇文章把你带入到JavaScript中的闭包与高级函数][JavaScript 1]

**4、**[大厂HR面试ES6中的深入浅出面试题知识点][HR_ES6]

觉得本文对你有帮助？请分享给更多人

关注「达达前端」加星标，提升前端技能

**这是一个有质量，有态度的公众号**

![format_png 41][]

![format_png 42][]

[format_png]: /images/20210724/350fa44c616d4b4d9132390792b28a26.png
[format_png 1]: /images/20210724/4b1f72de92b442f4b7b23f70b8226cfd.png
[format_png 2]: /images/20210724/da3d4b41069b47bd8347649ee883b3d9.png
[format_png 3]: /images/20210724/f8fbdffd0625432e8d9868b6ade6d442.png
[format_png 4]: /images/20210724/67c0afe3a95445ab86b35bd56c3ffec8.png
[format_png 5]: /images/20210724/3d291001a0744744b2c51d2b665814d9.png
[format_png 6]: /images/20210724/ddc3119b4a6741d78f9cd964f75f7411.png
[format_png 7]: /images/20210724/e0eda188937b4c2582eae2b2c40d7fe4.png
[format_png 8]: /images/20210724/b76696b415a140cf98f4577926e761ce.png
[format_png 9]: /images/20210724/be879858977646be80c6cc5e19c9204e.png
[format_png 10]: /images/20210724/5082b8131efb403cb074e2dd856b0931.png
[format_png 11]: /images/20210724/98deacb355984eb98a64366e49209e7d.png
[format_png 12]: /images/20210724/c497062d54bb47769864ac78399b89c1.png
[format_png 13]: /images/20210724/5e6f0366dd914c629d44750193aa4473.png
[format_png 14]: /images/20210724/59edfe7e7bac497d8c19d53edf95f750.png
[format_png 15]: /images/20210724/7c126e794e874c369d65094997817aba.png
[format_png 16]: /images/20210724/575406235e4d4aec823fced10ac5d9c2.png
[format_png 17]: /images/20210724/b86ef47ce4374c4d8ed41e5f4f4985db.png
[format_png 18]: /images/20210724/457546b7dcdc41fdbb8837afd65e456d.png
[format_png 19]: /images/20210724/4bcfdca31fec4b20bcf217826246b3fd.png
[format_png 20]: /images/20210724/eb6952d3a9824e3e8019697a31f2b8dd.png
[format_png 21]: /images/20210724/f33fe7ae126c412ea070a12b3cd637e0.png
[format_png 22]: /images/20210724/48d015d364004cfe98dcff26c2db691a.png
[format_png 23]: /images/20210724/46577b82e6bf4ebaa1091d18eea30418.png
[format_png 24]: /images/20210724/b3b84b5a442746d0a75464f82d746cc8.png
[format_png 25]: /images/20210724/e6910040360140b892656e49cffb202e.png
[format_png 26]: /images/20210724/3921803d77ce431baff2f15f5e6d1364.png
[format_png 27]: /images/20210724/ef694e4f353d4cd69291e0149dd171ec.png
[format_png 28]: /images/20210724/08fbd9bddc9c44ba98353c1705a8e983.png
[format_png 29]: /images/20210724/20bec3b7d4e249ad983fd3870248beeb.png
[format_png 30]: /images/20210724/709886113c224665a162f9fb0506022a.png
[format_png 31]: /images/20210724/75ff091266a6401a9c4cd41db7cbdd91.png
[format_png 32]: /images/20210724/350e38b5148c4be9b010f6e1bf1dca5f.png
[format_png 33]: /images/20210724/ecbcf8a2ac5e48debb23581a6e672909.png
[format_png 34]: /images/20210724/dd9d1a3444a940b39e0eeefacbbfd948.png
[format_png 35]: /images/20210724/b3b74a605a40457b9f9f7bfc79f61809.png
[format_png 36]: /images/20210724/64e8b20db0594be4847dd9e8420a6026.png
[format_png 37]: /images/20210724/c4631ff5c2b34f6d8b40690ca3855c52.png
[format_png 38]: /images/20210724/42b919e7ce5d42bbb2327a0bf66f2148.png
[format_png 39]: /images/20210724/b8ea081ee8684d32ac3ed003410df6a2.png
[format_png 40]: /images/20210724/01856a0aa4f7465fa083ac454195861a.png
[this_new_bind_call_apply]: https://blog.csdn.net/qq_36232611/article/details/103060481
[JavaScript]: https://blog.csdn.net/qq_36232611/article/details/103026957
[JavaScript 1]: https://blog.csdn.net/qq_36232611/article/details/103083743
[HR_ES6]: https://blog.csdn.net/qq_36232611/article/details/103105748
[format_png 41]: /images/20210724/3293788b9fef4d65b79f9adadba6001b.png
[format_png 42]: /images/20210724/73423e1c8a294df08270968ad3abca4c.png