我所理解的原型&原型链

Allen 发布于2019-08-23 15:32 / 3191人阅读

摘要：有以下几点三图片解析是原型链的链接通过查找到，是原型的关键字是实例对象是构造函数通过找到所以构造器的原型属于对象，也就是说是出来的。同理找到，发现属性，输出五参考资料原型与原型链如果有理解不对的地方，欢迎大佬指正

一、题目

我们先看一道题目

    var F = function() {};   
    Object.prototype.a = function() {
        console.log("a");
    };

    Function.prototype.b = function() {
        console.log("b");
    }

    var f = new F();
    f.a(); 
    f.b();
    
    F.a(); 
    F.b();

二、解题关键

借用网络上的图片，看起来有点绕，待我们一点一点理解。有以下几点：

三、图片解析

__proto__ 是原型链的链接

通过 __proto__ 查找到prototype， prototype是原型的关键字

var f = new F()

f: 是实例对象

F：是构造函数

f通过__proto__ 找到F.prototype,所以f.__proto__ === F.prototype

构造器的原型属于对象 Object ，也就是说 F.prototype 是 new object 出来的。所以 F.prototype通过 __proto__ 可以找到 Object.prototype

即：F.prototype.__proto__ === Object.Prototype

function Function() 是函数构造器

Function.__proto__ === Function.prototype

Function.prototype 是对象,所以Function.prototype.__proto__ === Object.prototype

终极：Objecy.prototype.__proto__ === null

四、题目解析

再回过头来看上面的题目

f.a()，f 是实例对象， f没有a属性，通过f.__proto__找到原型F.prototype，F.prototype上也没有a属性，继续通过 F.prototype.__proto__找到Object.prototype,发现a属性，所以输出a

f.b()，同理找到 Object.prototype,发现Object.prototype也没有b属性，继续通过__proto__查找到了null，所以b函数不存在，浏览器报错。则 F.a()，F.b()也不会执行

若注释了 f.b()，执行F.a()。F是函数，F上没有a属性，通过__proto__找到Function.prototype，发现Function.prototype没有a属性，继续通过__proto__,找到Object.prototype,找到了a属性，输出a

若注释了 f.b()，执行F.b()。同理找到Function.prototype，发现b属性，输出b

五、参考资料

JS 原型与原型链

如果有理解不对的地方，欢迎大佬指正！

idc机房托管超融合服务器 js原型链的继承原型原型链原型链原型链继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102193.html

我所认识的JavaScript作用域链和原型链

摘要：为了防止之后自己又开始模糊，所以自己来总结一下中关于作用域链和原型链的知识，并将二者相比较看待进一步加深理解。因此我们发现当多个作用域相互嵌套的时候，就形成了作用域链。原型链原型说完了作用域链，我们来讲讲原型链。　　毕业也整整一年了，看着很多学弟都毕业了，忽然心中颇有感慨，时间一去不复还呀。记得从去年这个时候接触到JavaScript,从一开始就很喜欢这门语言，当时迷迷糊糊看完了《J...

Bmob 2019-08-20 17:36 评论0 收藏0
一张图让自己搞懂(mēng)原型&amp;原型链

摘要：要搞清这三种关系指向之间的关系拗口，其实也就是要搞懂，构造函数由构造函数操作创造出的实例对象和构造函数的原型对象之间的关系。写在前面这篇博客来源于，有天mentor突然传给我了这张祖传的图片，并且发誓一定要给我讲清楚，然鹅在他的一番激情讲解之后，他自己也被绕懵了...于是后来我决定整理一下似乎还有点清晰的思路，记录一下我对这张图的理解。作为一个小白，对于js中这些比较复杂的概念的理...

CntChen 2019-08-22 18:15 评论0 收藏0
JS继承与工厂构造及原型设计模式解析

　　我们在前一篇文章《JS精粹，原型链继承和构造函数继承的毛病》,提到了：原型链继承、构造函数继承、组合继承；　　在另一篇文章《蓦然回首，工厂、构造、原型设计模式，正在灯火阑珊处》，提到了：我们用于创建对象的三种设计模式：工厂设计模式、构造设计模式、原型设计模式；　　至此，我们可以明显的感受到：JS 要实现面向对象（继承的能力），离不开这 3 种设计模式；　　原型链 + 构造函数 = 组合继承　...

3403771864 2023-05-21 16:21 评论0 收藏0
探索 proto &amp; prototype 与继承之间的关系

摘要：而和的存在就是为了建立这种子类与父类间的联系。创建一个基本对象建立新对象与原型我把它理解为类之间的连接执行构造函数小结可以理解为类，也就是存储一类事物的基本信息。原型原型链和继承之间的关系。原型原型的背景首先，你应该知道javascript是一门面向对象语言。是对象，就具有继承性。继承性，就是子类自动共享父类的数据结构和方法机制。而prototype 和 __proto__...

dockerclub 2019-08-21 17:26 评论0 收藏0
ES规范解读之赋值操作符&amp;属性访问器

摘要：那么什么是基础对象组件呢，举两个例子我们再来看看属性访问器，就是括号操作符及点号操作符都做了什么属性访问器也就是说括号跟点号对解释器而言是一样的。 ES规范解读之赋值操作符&属性访问器原文:https://github.com/kuitos/kuitos.github.io/issues/24事情起源于某天某妹子同事在看angular文档中关于Scope的说明Understandin...

funnyZhang 2019-08-21 10:41 评论0 收藏0