浅谈原型及原型链的理解

妖狐艹你老母 2022-12-27 02:13 144阅读 0赞

## 一、原型 ##

**原型的作用**：①数据共享，节约资源。②继承

### 例1： ###

let friend = new Person(); 
    Person.prototype.sayHi = function() {  
     console.log("hi"); 
    }; 
    friend.sayHi(); // "hi"，没问题！

实例之所以能够调用原型的方法是因为，实例与原型之间松散的联系，他先从实例中寻找，发现找不到，然后从原型中寻找找到了，然后输出。

### 例2： ###

原因：重写整个原型会切断最初原型与构造函数的联系，但实例引用的仍然是最初的原型。  
实例只有指向原型的指针，没有指向构造函数的指针。

## 二、原型链 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70]  
定义：

> 每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针指向原型。如果原型是另一个类型的实例呢？那就意味着这个原型本身有一个内部指针指向另一个原型，相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。这就是原型链的基本构想。

特例：

> Object.\_\_ proto\_\_ === Function.prototype //true  
> Object.\_\_ proto\_\_ === Function.\_\_ proto\_\_//true  
> Object.prototype === Function.prototype.\_\_ proto\_\_ // true  
> //因此  
> Function instanceof Object //true  
> Object instanceof Function //true

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70]: /images/20221120/3d0fd73d61a74cc79b20da8c0b8962a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/2a3cf73f71f046b79dc9d628669713c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 1]: /images/20221120/43e48226ec1d4afdaa11b6c540f0ed6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 2]: /images/20221120/e3e2a865b0e64e2982a457a0329bf582.png