浅谈原型和原型链！

╰半橙微兮° 2022-10-21 13:56 132阅读 0赞

## 原型 ##

> **定义**：原型是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象，可以继承该原型的属性和方法，原型也是对象。  
> 利用原型特点和概念，可以提取公共属性  
> 对象如何查看对象的构造函数：constructor  
> 对象如何查看原型：隐式属性\_\_proto\_\_

### 函数对象（联系） ###

> 所有引用类型（函数，数组，对象）都拥有\*\***proto****属性（隐式原型）；  
> 所有函数拥有**prototype**属性（显式原型）（仅限函数）  
> 原型对象：拥有**prototype\*\*属性的对象，在定义函数时就被创建

在讨论\_\_proto\_\_ 、prototype 、constructor这三者之间的关系，我们要先看一下构造函数的定义：

**new关键字的四步过程：**

> 1.  在构造函数代码开始执行前，创建一个空的对象；
> 2.  修改this的指向，把this指向刚刚创建出来的空对象；
> 3.  执行函数的代码；
> 4.  在函数完成之后返回this–即创建出来的对象；

Person.prototype.age = 18;
            function Person(name){ 
            this.name=name;
                // 模拟new构造过程
                // var obj = { 
                // __proto__ : Person.prototype
                // }
                // Person.call(obj)
                // this.name = name;
                // return obj;
                return { }
            }
            var p = Person("laila")

### 原型链（举例） ###

Grand.prototype.lastName = "李";
            function Grand(){ 
            }
            var g = new Grand()
    
            Father.prototype = g;
            function Father(){ 
                this.name = "xiaoming";
                this.money = { //0x11
                   "janghang" : 100
                }
                this.num = 1;
            }
            var f = new Father()
    
            Son.prototype = f;
            function Son(){ 
                this.hobbit = "打游戏"
            }
            var s = new Son()
            console.log(s.hobbit)//打游戏
            console.log(s.name)//xiaoming
            console.log(s.lastName)//李

s本身具体的方法只有Son里面的hobbit方法，但是由于上述代码的引式属性\_\_proto\_\_的指向形成了一个原型链式结构，所以s.hobbit，s.name，s.lastName都能调用到他们的祖先元素里面的属性和方法

实例s的**隐式原型**（**proto**）指向它构造函数的**显式原型**（prototype），指向的意思是恒等于：

**s.proto === Son.prototype**

### 图示详解 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 3]  
以上四张图可对原型链有一个充分的理解！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221021/557843e898c04ae7970d49fa75e403c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221021/cd94c93745ee456fb1a12587d7b77b69.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221021/383fe2f2206b421a97a80a9e66984031.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221021/44d11e1cd8214964814d4fd7fba98d2d.png