<
>

彻底理解JavaScript的原型与原型链

2022-04-14 22:04:42 来源:易采站长站 作者:

目录
前言基础铺垫prototypecontructor属性__proto__原型链提高总e也是一个普通对象,因此继续寻找User.prototype.__proto__(Object.prototype),成功调用到toString方法

提高

学完上面那些,大多数面试题都可以做出来了,例如下面这种

function A() {}function B(a) {    this.a = a;}function C(a) {    if (a) {        this.a = a;    }}A.prototype.a = 1;B.prototype.a = 1;C.prototype.a = 1;console.log(new A().a); //1console.log(new B().a); //undefinedconsole.log(new C(2).a); //2

但距离解决文章的最初的面试题还欠缺些什么,比如Function.__proto__ === Object.__proto__、Function.prototype.__proto__ === Object.prototype.__proto__等,接着我们来一一攻克它。

Objcet.__proto__ 、 Object.prototype、Object.prototype.__proto__

Object是构造函数,在第二部分我们讲过所有的函数都是通过new Function创建了,因此Object相当于Function的实例,即Object.__proto__ --> Function.prototype。 Object.prototype是Object构造函数的原型,处于原型链的顶端,Object.prototype.__proto__已经没有可以指向的上层原型,因此其值为null
// 总结:Object.__proto__ --> Function.prototypeObject.prototype.__proto__ --> null

Function.__proto__、Function.prototype、Function.prototype.__proto__

Function.prototype是Function的原型,是所有函数实例的原型,例如上面讲的Object.__proto__ Function.prototype是一个普通对象,因此Function.prototype.__proto__ --> Object.prototype
Function.__proto__: __proto__指向创造它的构造函数的原型,那谁创造了Function那? 猜想:函数对象也是对象,那Function.__proto__会指向Object.prototype吗?上文提到,Object.__proto__ --> Function.prototype。如果Function.__proto__ -> Object.prototype,感觉总是怪怪的,到底谁创造了谁,于是我去做了一下测试:

彻底理解JavaScript的原型与原型链 

实践证明只存在Object.__proto__ --> Function.prototype

苦思冥想没得出结果,难道Function函数是猴子不成,从石头缝里面蹦出来的?于是我进行了一同乱七八糟的测试,没想到找出了端倪。

彻底理解JavaScript的原型与原型链 

通过上面我们可以得出:Function.__proto__ --> Function.prototype

Function函数不通过任何东西创建,js引擎启动时,添加到内存中

总结

最后将原型与原型链方面的知识凝结成一张图:

彻底理解JavaScript的原型与原型链

所有函数(包括Function)的__proto__指向FunVJXowdction.prototype 自定义对象实例的__proto__指向构造函数的原型 函数的prototype的__proto__指向Object.prototype Object.prototype.__proto__ --> null

后语

知识的海洋往往比想象中还要辽阔,原型与原型链这边也反复的学过多次,我认为应该学的比较全面,比较完善了。但遇到这个面试题后,我才发现我所学的只不过是一根枝干,JS里面真的有很多深层次的宝藏等待挖掘。学海无涯,与君共勉。

最后再附赠个简单的面试题,提高一下自信:

var F = function () {}Object.prototype.a = function () {}Function.prototype.b = function () {}var f = new F();console.log(f.a, f.b, F.a, F.b);// 原型链// f.__proto__ --> F.prototype --> Object.prototype// F.__proto__ --> Function.prototype --> Object.prototype

暂时禁止评论

微信扫一扫

易采站长站微信账号