js 原型，继承的本质，原型链

港控/mmm° 2023-06-13 09:42 130阅读 0赞

## js 原型 ##

原型与构造函数，实例化对象之间的关系图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70]  
首先先构建一个构造函数 A，并且新建一个实例 a

function A(){ 
         }
         var a = new A();

1.  每一个构造函数都有一个属性 `prototype` ,指向它的原型对象 A.prototype
2.  每一个原型对象都有一个 constructor 属性(constructor并非构造函数，Constructor才是构造函数 A() ) 指向构造函数  
    `console.log(A.prototype.constructor===A); // 输出true`
3.  每一个实例化对象都有一个`__proto__`属性，指向构造函数的原型对象  
    `console.log(A.prototype===a.__proto__); // 输出true`

## 继承的本质 ##

在 javascript 中实例化对象相当于继承自原型对象，如

function A(){ 
             name="A";
         }
         A.prototype.age = 18;
         var a = new A();
         console.log(a.name);  //返回未定义
         console.log(a.age);  //返回 18

实例化对象 a 不能访问构造函数 A 的属性，却可以访问原型对象的属性。  
所以在开发中为类A设置方法，应该设置在原型对象上,如：

A.prototype.getName = function(){ 
            return this.name
     }
    a.getName();

众所周知，新建类 A 是主类 Object 的子类，那么两者之间是通过怎样的关系实现继承的  
在 JavaScript 中实现类之间的继承也是通过原型来实现  
每一个类的原型对象都有一个`__proto__`属性。由这个属性可以指向 Object 类的原型对象  
`console.log(A.prototype.__proto__==Object.prototype); // true`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 1]

## 原型链 ##

如果要访问某个对象的属性，若这个对象没有该属性，便会通过原型链一步步向上寻找，直到在主类中也无法找到返回 not defined 没有定义  
注意：

function A(){ 
         }
         var a = new A();
         console.dir(A) //dir可以访问对象的所有属性方法
         console.log(a)

通过查看控制台可以得到如下信息  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 2]  
在里面可以查看各个属性之间的联系

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191115202550161.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191115205952771.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191115210727274.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4ODk5OA==,size_16,color_FFFFFF,t_70