前端面试自测知识点-原型链

逃离我推掉我的手 2022-09-10 00:21 123阅读 0赞

#### 原型链 ####

*  创建对象的几种方法
 *  原型、构造函数、实例、原型链
 *  instanceof原理
 *  new运算符

##### 创建对象的几种方法 #####

**原型链类**创建对象有几种方法：

*      // 字面量
        var o1 = { name:"01"}
        var o11 = new Object({ name:"o11"})
 *      // 通过构造函数
        // 任何一个函数 只要被new使用了，那么它就可以叫做构造函数
        var M = function(){ 
          this.name = "o2"
        }
        var o2 = new M()
 *      // 通过Object.create()
        var P = { name: "o3"}
        var o3 = Object.create(P)

##### 关系 #####

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

*  任何一个函数 只要被new使用了，那么它就可以叫做构造函数，也就是说，函数都是构造函数，函数都有一个prototype属性，prototype里有一个constructor，这个constructor === 这个函数本身
 *  一个实例.`__proto__`和它的构造函数的原型对象是一样的
 *  原型链：原型对象通过`__proto__`属性一层一层往上找
 *  许多实例共同的东西就是原型对象，在原型对象上定义的方法可以被所有的实例共有
 *  只有函数有prototype，对象没有prototype
 *  只有实例对象有`__proto__`，函数即是函数也是一个对象，所以也会有`__proto__`，函数的`__proto__`是Function.prototype，也就是说函数也是一个Function的实例

##### instanceof原理 #####

根据实例的`__proto__`往下找，然后对比原型对象的constructor来判断  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YOP5qCRXw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YOP5qCRXw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YOP5qCRXw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220829/b5b786fa46e74dc9907c46d1ea699eb3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YOP5qCRXw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: /images/20220829/029458e07aab4841b8cd128df484412a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YOP5qCRXw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]: /images/20220829/353c9cf58b624b22988127b37db78fe9.png