原型与原型链原型与原型链是前端中比较重要的概念，比较绕口，很多人看不懂。正好今天有人让我写一篇文章来梳理一下。首先说一下什么是原型，原型链和构造函数。Prototype：JS中的对象都包含一个prototype内部属性，对应对象的原型。原型链：原型链是由用于继承和共享属性的对象组成的对象链。并且原型链的长度是有限的。Constructor：原型对象包含一个constructor属性，它对应于创建所有指向原型的实例的构造函数。functionSuper(){};functionMiddle(){};functionSub(){};Middle.prototype=newSuper();Sub.prototype=newMiddle();varsuber=newSub();看看原型和原型。所有对象都有一个指向对象原型的proto属性。除了proto属性之外，所有函数对象都有一个prototype属性。因为函数也是对象，所以有proto，但同时函数的对象类型比较特殊，所以也有prototype。1.构造函数构造函数其实就是一个普通的函数，但是为了区别普通函数，通常建议构造函数名的首字母大写；functionFoo(){}构造函数调用：functionFoo(){console.log(1)//1}Foo();//12.原型JavaScript中的数据类型分类基本数据类型和引用数据类型基本数据类型：Number、String、Boolean、Undefined、Null、Symbol。引用数据类型：Object、Function、Date、Array、RegExp等。除了undefined和null，基本类型中的任何数字、字符、布尔值和符号值都有一个__proto__属性。以一个字符串为例，我们打印它的__ptoto__并展开它。所有对象都有一个__ptoto__属性，而字符串实际上有一个__proto__属性，__proto__是一个访问器属性，指向创建它的构造函数的原型原型。还记得之前的cup构造函数吗？杯子的每个实例其实只有直径和高度属性，但是通过实例的__proto__属性，我们找到了构造函数CupCustom的prototype原型，并成功访问了prototype上的color属性。functionPerson(){}//给原型对象添加一个方法Person.prototype.sayName=function(){alert(this.name);}prototype：是函数的一个属性（每个函数都有一个原型属性），this属性是指向对象的指针。它是一个显示修改对象原型的属性。__proto__：是对象拥有的内置属性（请注意：prototype是函数的内置属性，__proto__是对象的内置属性），JS内部使用它来查找原型链。functionFoo(){}Foo.prototype.myName="Hello"//Prototypeconstfoo=newFoo();foo.__proto__//Prototype链接原型属性自动创建从上图可以看出，Foo对象有一个原型对象Foo.prototype，它有两个属性，分别是constructor和__proto__，其中__proto__已被弃用。构造函数Foo有一个指向原型的指针，而原型Foo.prototype有一个指向构造函数Foo.prototype.constructor的指针，这是一个循环引用，即：Foo.prototype.constructor===Foo；//true3.原型链当我们在浏览器中打印obj的时候，你会发现obj上其实有一个__proto__属性，所以好像前面的问题和这个属性有关。事实上，每个JS对象都有一个__proto__属性，它指向原型。这个属性现在不建议直接使用，它只是早期浏览器为了让我们访问内部属性[[prototype]]而实现的东西。对象是所有对象的父亲，所有对象都可以通过__proto__找到它。函数是所有函数之父，所有函数都可以通过__proto__找到它。函数的原型是一个对象。对象的__proto__属性指向原型，__proto__连接对象和原型，形成原型链。看完这张图，我再解释一下什么是原型链。其实原型链就是多个对象通过__proto__连接起来。为什么xialu可以访问到sayHi函数，eat函数，最后是toString等，是因为xialu通过原型链__proto__找到了toString等函数。
