JavaScript知识梳理[三] 原型和原型链

灰太狼 2023-02-28 04:06 5阅读 0赞

> 最早开发Android 时熟悉的是JAVA ，JAVA 是 基于类的，而JavaScript 是 基于原型的语言，对原型和原型链的理解在JS的学习中尤为重要。

### 什么是原型（prototype）？ ###

prototype 是 给其他对象提供共享属性的对象，由此可见prototype 也是对象，只是在这里承担了给其他独享提供共享属性的职能。

每个对象都有一个**原型对象**，对象以原型为模板从原型继承方法和属性，而这些方法和属性定义在对象的构造器函数的prototype 属性上，而不是对象实例本身。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1][]

构造函数Person 有一个指向原型的指针，Person.prototype 有一个指向构造函数Person.prototype.constructor 的指针 ，所以构造函数和原型的关系如上图，属于相互引用。实例对象的原型获取通过\_\_proto\_\_ ，\_\_proto\_\_ 是每个实例都有的属性，而prototype 是构造函数的属性，但是两个的指向是一样的都是指向了对象的原型。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 2][]

总结：原型是指为其他对象提供共享属性访问的对象，在创建对象时，每个对象想都包含一个隐式引用指向他的原型对象或者null，原型也是对象，他也有自己的原型，进而可以形成原型链。

### 原型链（prototype chain）是什么？ ###

每个对象都有一个原型，通过\_\_proto\_\_指针指向上一层的原型，并从中继承方法和属性，同时原型对象也拥有原型，这样一层一层嵌套，最终指向null,这种关系被称为原型链.

> 每个实例对象（ object ）都有一个私有属性（称之为 \_\_proto\_\_ ）指向它的构造函数的原型对象（**prototype** ）。该原型对象也有一个自己的原型对象( \_\_proto\_\_ ) ，层层向上直到一个对象的原型对象为 `null`。根据定义，`null` 没有原型，并作为这个**原型链**中的最后一个环节。引自 [MDN 继承与原型链][MDN]

用我没有天赋的手画一画 凑合看吧 想加个表情

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 3][]

### 了解原型和原型链有什么用？ ###

在基本了解了原型和原型链之后，如果没有实际的运用可能体会不到其作用，但是毕竟JavaScript 是基于原型的所以他的作用体会在方方面面。

在使用vue 框架开发的时候，你是否有定义过全局的方法，是不是挂载到了Vue 实例的 prototype 原型上；

当你想对一个对象的方法做扩展的时候是不是使用了继承，这样原来的方法可以使用，同时可以扩展出自己的方法；

在开发中，你是不是不知不觉已经使用了本不是自己定义的一些方法呢，因为那些是Object 对象的方法，为什么能用；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200720150201481.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1]: /images/20230209/90e9cecd24784adbb40092900215ef8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200720153528441.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ==,size_16,color_FFFFFF,t_70
[MDN]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200721091333183.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ==,size_16,color_FFFFFF,t_70