摘要：它指向构造函数的原型对象这是原型对象上的一个指向构造函数的属性。先看代码的构造函数创建一个的实例，小猪佩奇敲黑板，划重点，理解这一句整个问题的关键，请多重复几遍。也就是说小猪佩奇的原型，就是从继承来的写成代码就是这个样子。
没错，我就是标题党！你已经成功被我骗进来了。来都来了，那就聊聊再走呗！接下来就听我一本正经地跟你说道说道。
Javascript的原型是这门语言的一个重点和难点。看过很多大佬写的解释Javascript原型的文章，但是很多对于初学者其实不是很友好，看完之后还是云里雾里。我虽然不敢说能把这个东西解释的很清楚，但是作为一个前端菜鸟，我可能更知道大家在读文章的时候会卡在哪一步，所以希望本文能够帮助到大家。
在文章开始，我先明确几个概念，这里如果你觉得不好理解，就先牢牢地记住它，然后继续往下阅读，读完你就会豁然开朗，相信我！另外，一定要每行每字去读，勿跳着读，博主就犯过这样的错误，导致越读越糊涂，我这里也尽量压缩字数，保证你读的每个字都是有用的。答：“你都忽悠半天了赶紧开始吧！”
prototype ：每个函数都会有这个属性，这里强调，是函数，普通对象是没有这个属性的（这里为什么说普通对象呢，因为JS里面，一切皆为对象，所以这里的普通对象不包括函数对象）。它是构造函数的原型对象；
__proto__ ：每个对象都有这个属性,，这里强调，是对象，同样，因为函数也是对象，所以函数也有这个属性。它指向构造函数的原型对象；
constructor ：这是原型对象上的一个指向构造函数的属性。
先看代码
// Pig的构造函数
function Pig(name, age) {
this.name = name;
this.age = age;
}
// 创建一个Pig的实例，小猪佩奇
var Peppa = new Pig("Peppa", 5);
敲黑板，划重点，理解这一句整个问题的关键，请多重复几遍。：在实例化的时候，prototype上的属性会作为原型对象赋值给实例。 也就是说小猪佩奇的原型，就是从Pig.prototype继承来的写成代码就是这个样子Peppa.__proto__ === Pig.prototype。
Pig是一个函数对象，它是Function对象的一个实例，所以Pig.__proto__ === Function.prototype一定为true。
我们在上面提到了constructor这个属性，它位于原型对象上并且指向构造函数，所以Pig.prototype.constructor === Pig
至此，我大致捋了一遍这三个属性的关系，我们再顺着这条链继续往深挖一挖。Function.prototype，也就是Function的原型对象。这个原型对象的__proto__指向了Object.prototype。打破砂锅问到底，Object.prototype.__proto__又指向谁，JS世界里万物皆对象，Object似乎已经到了原型链的顶端，果然不出我所料，它确实是null。：
你可能要吐槽了，说好的讲明白呢，这一坨都被你绕糊涂了，一张图胜过千言万语：
解释一下上面的图。先看蓝色那条线，Pig,Function和Object的构造函数是Function的实例，所以它们的__proto__均指向Function.prototype。这就印证了敲黑板说的那句话，prototype属性会作为原型对象赋值给实例，每个对象的__proto__都指向原型对象（处于最顶层的Object.prototype除外）。
再看绿色那条，Pig和Function的原型对象是Object的实例，所以它们的__proto__均指向了Object.prototype，也就是Object的原型对象。
浅蓝色的线表明了原型的constructor指向了构造函数。
Emmmm，其实也没那么复杂对不对？接着说一下原型链。正如你在上面图中所看到的，JS在创建对象的时候，会在新对象上产生一个__proto__的属性，这个属性指向了它构造函数的原型的prototype。由此一级一级向上直到到达Object.prototype.__proto__ === null的这个链条我们称之为原型链。
关于继承的概念，本来想写在一起的，后来想想，内容过多只会让文章成为收藏不看系列，所以这块的内容放在以后的文章里详解。各位看官，我想我大致讲明白了原型和原型链的概念，有什么错误还恳请批评指正。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/107962.html
摘要：每天一个社会人实现效果想法之前看到一篇博客，使用绘制出了小猪佩奇，所以自己想试一试，采用纯绘制出低配版的小猪佩奇。在布局上，没有坚持嵌套，导致缩放时位置错位，如果想实行缩放一致，可采用小猪的头部嵌套布局实现。 每天一个CSS-社会人 实现效果 showImg(https://segmentfault.com/img/remote/1460000016461611?w=667&h=620...
摘要：所以一开始让我看小猪佩奇的时候我是拒绝的，因为你不能让我看，我就马上去看，第一我要试一下。其实这道题对于真正看了小猪佩奇的人来说是送分题，就看是不是真的看了。这里说的都是类，这也正是小猪佩奇的构图精髓，一种手绘风格，而不是标准刻板的线条。 欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 作者：江志耿 | 腾讯TEG网络工程师 我是佩奇，哼，这是我的弟弟乔治，呱呱，这是我的妈...
摘要：主要有以下几个步骤找一张小猪乔治的图片参考对图片中的部分进行分解，并逐一实现废话其实掌握了后，这些步骤都不难了，细心绘制就可以完成啦。我绘制的小猪乔治如图参考资料用画小猪佩奇，你就是下一个社会人 概述 之前看了一篇关于用CSS来画小猪佩奇的文章，抱着锻炼自己的心态造了个轮子，画了个佩奇的小弟乔治，效果可以看这里，源码在这里。 开发过程中也让我对border-radius这个属性有了更深...
摘要：代码示例语法和方法类似，不同的是，传入调用函数的参数变成以数组的形式传入，即改造上面的示例就是方法用于将函数体内的绑定到某个对象，然后返回一个新函数。类型包装对象数值字符串布尔值在一定条件下，也会自动转为对象，也就是原始类型的包装对象。 现在的前端框架层出不穷，3个月就要重新入门一次前端的现状，让我们来不及学好基础就开始上手框架。常常就因为这样，我们会很快到达基础基础技术瓶颈，基础是所...
阅读 924·2021-11-24 10:21
阅读 2429·2021-11-19 11:35
阅读 1425·2019-08-30 15:55
阅读 1120·2019-08-30 15:54
阅读 1104·2019-08-30 15:53
阅读 3380·2019-08-29 17:21
阅读 3201·2019-08-29 16:12
阅读 3287·2019-08-29 15:23
