原型和原型链

原型和 原型链 是前端比较重要的概念，也比较绕，很多人都搞不明白。刚好今天有人问我索性就写篇文章整理一下。

首先来说一下什么是原型、原型链和构造函数。

原型 ：JS中的对象都包含了一个prototype的内部属性，这个属性所对应的就是该对象的原型。

原型链 ：原型链是是有一些用来继承和共享属性的对象组成的对象链。并且原型链的长度是有限的。

构造函数 ：原型对象包含一个constructor属性，对应创建所有指向该原型的实例的构造函数。

  Function  Super(){};
function Middle(){};
function Sub(){};
Middle.prototype = new Super();
Sub.prototype = new Middle();
var suber = new Sub();
  

接下来说一下 prototype 和 proto

所有对象都有 proto 属性指向该对象的原型。

所有函数对象除了有 proto 属性之外还有prototype属性。因为函数也是对象，所以有 proto ，但同时函数这一对象类型比较特殊，所以还有prototype。

一、构造函数

构造函数其实就是一个普通函数，只是我们为了区分普通函数，通常建议构造函数name首字母大写；

 function Foo(){
    
}
  

构造函数调用：

 function Foo(){
    console.log(1) // 1
}
Foo(); // 1
  

二、原型

JavaScript中数据类型分类基本数据类型与引用数据类型

• 基本数据类型：Number， String ， Boolean ，Undefined，Null， Symbol 。
• 引用数据类型：Object，Function，Date，Array，RegExp等。

基本类型中除了undefined与null之外，任意数字，字符，布尔以及symbol值都有 __proto__ 属性，以 字符串 为例，我们打印它的 __ptoto__ 并展开

所有的对象都有 __ptoto__ 属性，而字符串居然也有 __proto__ 属性， __proto__ 是一个访问器属性，它指向创建它的构造函数的原型prototype。还记得前面做杯子的构造函数吗？每实例个杯子其实只有直径与高度属性，但通过实例的 __proto__ 属性我们找到了构造函数CupCustom的原型prototype，从而成功访问了prototype上的color属性。

 function Person(){}
// 为原型对象添加方法
Person.prototype.sayName = function(){     alert (this.name);}
  

prototype:是函数的一个属性（每个函数都有一个prototype属性），这个属性是一个指针，指向一个对象。它是显示修改对象的原型的属性。

__proto__ :是一个对象拥有的内置属性（请注意： prototype是函数的内置属性， __proto__ 是对象的内置属性 ），是JS内部使用寻找原型链的属性。

 function Foo(){
    
}
Foo.prototype.myName = "你好" // 原型
const foo = new Foo();
foo.__proto__ // 原型链接
  

prototype 属性就被自动创建了

从上面这张图可以发现， Foo 对象有一个原型对象 Foo.prototype ，其上有两个属性，分别是 constructor 和 __proto__ ，其中 __proto__ 已被弃用。

构造函数 Foo 有一个指向原型的指针，原型 Foo.prototype 有一个指向构造函数的指针 Foo.prototype.constructor ，这就是一个 循环引用 ，即：

 Foo.prototype.constructor === Foo; // true
  

三、原型链

当我们在浏览器中打印 obj 时你会发现，在 obj 上居然还有一个 __proto__ 属性，那么看来之前的疑问就和这个属性有关系了。

其实每个 JS 对象都有 __proto__ 属性，这个属性指向了原型。这个属性在现在来说已经不推荐直接去使用它了，这只是浏览器在早期为了让我们访问到内部属性 [[prototype]] 来实现的一个东西。

• Object 是所有对象的爸爸，所有对象都可以通过 __proto__ 找到它。
• Function 是所有函数的爸爸，所有函数都可以通过 __proto__ 找到它。
• 函数的 prototype 是一个对象。
• 对象的 __proto__ 属性指向原型， __proto__ 将对象和原型连接起来组成了原型链。

看完这张图，我再来解释下什么是原型链吧。其实原型链就是多个对象通过 __proto__ 的方式连接了起来。为什么 xialuo 可以访问到 sayHi 函数，还能访问 eat 函数，最后 toString 等等，就是因为 xialuo 通过原型链 __proto__ 找到了 toString 等函数。