Javascript 原型链

nanfeiyan 发布于2019-08-23 15:17 / 1073人阅读

摘要：先来一张图看看几个名词的关系构造函数原型实例原谅我的狂草字体，我手写比用电脑画快。今天我们只说原型链，所以接下来我就围绕着原型链的几个部分说起。每个函数都有一个属性借用属性存储了的原型对象。

先来一张图看看几个名词的关系构造函数、原型、实例

原谅我的狂草字体，我手写比用电脑画快。

今天我们只说原型链，所以接下来我就围绕着原型链的几个部分说起。

这个大家都很熟悉了，首字母大写的函数我们都可以作为构造函数，不是说小写的就不能new，也是可以的，暂时说成约定俗成吧！

        // 构造函数
        function Fn() {}
        //原型对象
        console.log(Fn.prototype)
          //new
        let fn = new Fn() 
        //实例
        console.log(fn)

代码部分结束了，今天我们就用这4行代码描述一下上图也就是原型链的来龙去脉。

每个函数都有一个属性prototype,借用**Function.prototype** 属性存储了 Function 的原型对象。

验证了我草图构造函数.prototype指向原型对象

完整的log看一下

实例.__proto__也指向原型对象

从log里也能看出来

实例原型的constructor指向构造函数

最后再说构造函数 new关键字生成实例

手绘图说完了，我们说正题原型链，为什么再说原型链之前先画了一个草图，为了帮助预热理解。

每一个原型对象都有一个__proto__属性，这个是我们在代码中继承的关键，也是众多面试官所问的什么是原型链

上图可以看到，第一次__proto__找到了原型对象，第二次__proto__找到了Object实例对象，第三次null查找结束。

我们平时开发中用到了__proto__去查找链条中我们继承的方法和属性都在prototype（原型）上，所以不能在Fn.prototype = xxx操作,这样链条就会中断，只能在原型上扩展属性。

明天继续聊继承！

欢迎吐槽！

云服务器私有云原型原型链原型链 javascript原型原型链继承

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

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

如何理解JavaScript的原型和原型链？

摘要：之前有朋友问怎么去理解原型和原型链的问题。理解原型链的小技巧将箭头视作泛化子类到父类关系那么图中所有的虚线将构成一个继承层级，而实线表示属性引用。原型链是实现继承的重要方式，原型链的形成是真正是靠而非。之前有朋友问怎么去理解原型和原型链的问题。这个问题，在面试中，很多同学经常都会遇到。这里给大家讲讲，方便大家记忆。 JavaScript的特点JavaScript是一门直译式脚本...

xuexiangjys 2019-08-02 16:12 评论0 收藏0
如何理解JavaScript的原型和原型链？

摘要：之前有朋友问怎么去理解原型和原型链的问题。理解原型链的小技巧将箭头视作泛化子类到父类关系那么图中所有的虚线将构成一个继承层级，而实线表示属性引用。原型链是实现继承的重要方式，原型链的形成是真正是靠而非。之前有朋友问怎么去理解原型和原型链的问题。这个问题，在面试中，很多同学经常都会遇到。这里给大家讲讲，方便大家记忆。 JavaScript的特点JavaScript是一门直译式脚本...

adie 2019-08-23 16:54 评论0 收藏0
我所认识的JavaScript作用域链和原型链

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

Bmob 2019-08-20 17:36 评论0 收藏0
细说 Javascript 对象篇（二） : 原型对象

摘要：并没有类继承模型，而是使用原型对象进行原型式继承。我们举例说明原型链查找机制当访问一个对象的属性时，会从对象本身开始往上遍历整个原型链，直到找到对应属性为止。原始类型有以下五种型。此外，试图查找一个不存在属性时将会遍历整个原型链。 Javascript 并没有类继承模型，而是使用原型对象 prototype 进行原型式继承。尽管人们经常将此看做是 Javascript 的一个缺点，然...

lansheng228 2019-08-19 14:40 评论0 收藏0
《javascript高级程序设计》笔记：原型图解

摘要：不理解没关系，下面会结合图例分析上一篇高级程序设计笔记创建对象下一篇高级程序设计笔记继承参考之原型链的解读三张图搞懂的原型对象与原型链继承与原型链文章直接从原型图解开始的，如果对一些概念不太清除，可以结合后面几节查看 1. 图解原型链 1.1 铁三角关系（重点） function Person() {}; var p = new Person(); showImg(https://s...

vspiders 2019-08-21 17:29 评论0 收藏0
JavaScript原型链以及Object，Function之间的关系

摘要：由于一般所有的原型链最终都会指向顶端的，所以它们都是的。好了现在了，成了所有对象原型链的。 JavaScript里任何东西都是对象，任何一个对象内部都有另一个对象叫__proto__，即原型，它可以包含任何东西让对象继承。当然__proto__本身也是一个对象，它自己也有自己的__proto__，这样一级一级向上，就构成了一个__proto__链，即原型链。当然原型链不会无限向上，它有...

zacklee 2019-08-21 18:20 评论0 收藏0