JavaScript的原型和原型链分析

Bertha 。 2021-09-18 21:16 418阅读 0赞

原型和原型链是JavaScript中一个比较难理解的概念，本文理论性和操作性较强，感兴趣的小伙伴们可以看看，有一定基础的小伙伴也可以参考学习。

一、原型（prototype）

1.prototype属性和\[\[prototype\]\]内部属性

1.1. 任何一个函数，都有一个prototype属性，它指向prototype对象。prototype对象中有一个constructor属性，constructor又指向函数本身。

![20190410104929454.png][]

1.2. 任何一个对象，都有一个内部的\[\[prototype\]\]属性，它指向这个对象的构造函数的prototype对象。\[\[prototype\]\]是ECMAScript定义的内部属性，在脚本中不可直接访问，但浏览器对每个对象都支持一个\_\_proto\_\_属性，脚本可以访问\_\_proto\_\_，等同于\[\[prototype\]\]。

![20190410104912672.png][]

2.构造函数

2.1. 构造函数也是普通的函数，所以它也有prototype属性。prototype的constructor指向构造函数本身。

![20190410104715397.png][]

2.2. 构造函数如果不使用new关键字调用，跟普通函数没有区别。如果使用new关键字调用，将按照以下步骤执行。

1.创建一个新对象。

2.将this指向这个新对象。

3.执行构造函数的代码。

4.返回这个新对象。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70][]

3.原型对象

原型对象的用途是它可以包含所有实例共享的属性和方法。  
        如上面的Food构造函数，eat方法是可以被所有实例共享的，所以，可以把它放在原型对象里来定义。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70 2][]

4.查找属性

当代码读取对象的属性时，会按照特定的顺序来执行搜索。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70 4][]

结合上图分析，查找food.name的过程，首先在实例本身查找，找到属性name，那么停止查找。查找food.eat()，也是先在实例本身查找，并没有找到，则通过内部的\[\[prototype\]\]在构造函数的prototype对象中查找，找到了，则执行food.eat().

二、原型链

1.链的形成

在上面的图中，food的内部指针\[\[prototype\]\]指向了构造函数的原型对象，那么如果又有另一个构造函数的原型，指向了food的\[\[prototype\]\]，那么就形成了一个由原型组成的链.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70 6][]

2.属性查找

当脚本访问对象的属性时，首先查找对象本身，如果没有找到，则在构造函数的原型中寻找，如果还是没有找到，则继续向上，向构造函数的原型的\[\[prototype\]\]所指向的原型对象中去寻找，以此类推。

3.实现方法

在上面的栗子中，属性值都是基本数据类型，但如果属性值是引用类型，就会出现问题。例如：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70 7][]

总结

ECMAScript把原型链作为实现继承的最主要方法。

原型链的基本思想是：利用原型，让一个引用类型继承另一个引用类型的属性和方法。

原型链的实现方式：每一个构造函数，都包含一个原型对象，而构造函数的实例也有一个内部指针，指向原型对象。如果让这个实例等于另一个构造函数的原型对象，那么就形成了一个链，是由原型组成的链，也就是原型链。

———————————————————

作者：xiaoya1987  来源：CSDN

欢迎留言，共同进步。或者关注微信公众号\[筑梦前端\]。

[20190410104929454.png]: /images/20210812/aa786663d76345d7a359aa996882f49a.png
[20190410104912672.png]: /images/20210812/0609a0bf70264e60bb9391e227fcb451.png
[20190410104715397.png]: /images/20210812/bcd1c3a9f0984b23affbd5976b4f1d40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70]: /images/20210812/354461ed66f146a093186724084bf29d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70 1]: /images/20210812/478deb0483c04f348fd47612dec227ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70 2]: /images/20210812/0fd3790fb3624abb86246c43ddd8ccf2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70 3]: /images/20210812/54522cc00c484932b435ae86af73617a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70 4]: /images/20210812/5ab26646411040699f397af8fc41d2e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70 5]: /images/20210812/e1355c4a16cb479dbe81ef6cdd51fa20.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70 6]: /images/20210812/766d1112d413464dae2595c2155dfa34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70 7]: /images/20210812/8515ff14ea264458b669c250c02025fa.png