prototype,__proto__,constructor到底是什么关系(图解)

本篇博客基于以下博客学习而来,这里面的解释更为详细。

以下代码是通过构造函数,实例化一个f1对象,其中的关系图表如下(图片是上面博客中的,我为了加强记忆,自己默背画了一份)

function Foo () {...};
let f1 = new Foo();

在这里插入图片描述

先看总结

特点 指向 作用
prototype 函数独有 函数–>对象 含义是函数的原型对象,可以给函数的所有实例添加共享的属性和方法
(函数在创建的时候,就会默认创建其prototype对象)
_ _proto _ _ 对象独有 对象–>对象 当访问对象的属性的时候,如果没有,就会去 _ _proto _ _所指向的对象中去找,
找不到的话再往上层 _ _proto _ _去找,直到找到null为止。
constructor 对象独有 对象–>函数 含义是指向该对象的构造函数,其中constructor可以从 _ _proto _ _中继承而来

函数也是对象,所有函数三种属性都具有

具体分析

1. _ _proto _ _

在这里插入图片描述
实例对象可以通过 _ _proto _ _一层一层往上找,当找到 null 的时候,就完整的循环了一遍原型链,平时调用的字符串方法,数组方法,对象方法,函数方法等,都是靠 _ _proto _ _继承而来的。

2. prototype

在这里插入图片描述
由上图可以看出, prototype只有函数才有,有了这个函数的原型对象,那么所有通过函数实例化的对象才能找到共享的方法,而且当需要添加公共方法的时候也需要通过 prototype添加,下方代码则是在数组的原型对象中,添加了一个去重的方法

//数组去重
Array.prototype.unique = function () {
    return Array.from(new Set(this));
};
let arr = [1, 2, 3, 4, 1];
let arrU = arr.unique();
console.log('arrU', arrU); //arrU [1, 2, 3, 4]

3. constructor

在这里插入图片描述

constructor是指向对象的构造函数,每个对象都可以找到其对应的构造函数,由上图可知, Function的构造函数是它自身,因为它既是函数,又是对象。最终所有的构造函数都是 Function
弄清楚了prototype__proto__constructor之间的关系后,我们可以开始梳理JavaScript中的继承,请移步我的下一篇博文。
JavaScript原型继承,构造函数继承,组合继承,ES6继承,我能学会你也可以

发布了30 篇原创文章 · 获赞 6 · 访问量 4714

猜你喜欢

转载自blog.csdn.net/EcbJS/article/details/105113789
今日推荐