美文网首页让前端飞Web前端之路
这一章让你理解透js中的prototype和__proto__

这一章让你理解透js中的prototype和__proto__

作者: web前端_潘哥哥 | 来源:发表于2020-02-27 12:50 被阅读0次
    • Function Array Object 这是浏览器内置的三个构造函数。 不管是函数还是数组,这些都属于对象类型

    • 其中Function这个函数没有被什么构造出来,是js引擎使用底层代码实现的,后面两者都是基于Function被Function构造出来的。

    • 记住,js中,每一个对象都是被构造函数构造出来的。就算你是直接这么写:

      • var obj = {};这样是通过new Object这个构造函数构造出来的)
      • var arr = [];这样是通过new Array这个构造函数构造出来的)
      • var func = function(){} 或者 直接函数声明 function test(){}这样都是在内部通过new Function构造出来的)
    • 然后这些通过构造出来的对象,他们都会有一个proto属性,这个属性的属性值指向的是将这个对象构造出来的那个构造函数身上的一个属性prototype的地址,注意这个属性只有函数才有.

    function  Test(){
        this.xxx = xxx;
        ......;
    }
    var test = new Test();
    
    • Test函数本身有一个prototype 这个属性的值是一个普通的对象 Test.prototype

    • test是构造出来的实例对象,身上有一个proto属性,这个属性的值为 test.proto = Test.prototype,只要创建了一个实例对象,就会有这么一个属性,指向构造函数的原型prototype

    • 然后下一个知识点,Test身上为什么也有proto呢,因为前面说了,这个函数也是对象类型,对象就一定是由构造函数构造出来的,Test这个构造函数自然也就有proto。前面也有说过,函数都是由这个Function构造出来的。

    • 这个属性proto指向的就是Function这个构造函数的原型prtotype

    • 那么也就是说函数这个对象类型不但具有prototype属性,还有proto属性。也只有函数才有这两个属性

    • 那么之前的内置的Object,Array这两个构造函数也是满足上面这个条件的,有两个属性,proto属性也都是指向的Function的原型prototype。

    image.png image.png
    最后附上一张图,助你理解原型链
    image.png
    这里构造函数本身的__proto__这条链就没画图了,前面也用文字详细的说过。
    至此,原型和隐式原型也就讲完了,不知道大家看完之后有没有一种恍然大悟的感觉呢?欢迎大家在下方留言评论哦,如有不足之处还请各位大佬加以指正!

    相关文章

      网友评论

        本文标题:这一章让你理解透js中的prototype和__proto__

        本文链接:https://www.haomeiwen.com/subject/upythhtx.html