本篇博客基于以下博客学习而来,这里面的解释更为详细。
以下代码是通过构造函数,实例化一个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继承,我能学会你也可以