一篇文章，让你彻底搞懂javasript原型和原型链

原型

什么是原型：

原型就是实例对象（构造函数new 一个函数出来的对象）身上所特有的一种属性，是javascript实现继承的其前提

开始：

1. 正式介绍原型前需要先了解构造函数和实例对象的概念，什么是构造函数，什么又是实例对象

   function Person() {}
   //此处Person就是一个构造函数，需要有new关键字
   //通过new产生的变量p就属于Person的实例对象
   var p = new Person();
   

2. 了解了实例对象和构造函数的基本原理，我们来看一下是实例和构造函数之间的内部属性关系

   1. prototype属性：要知道js中prototype属性仅存在函数身上 ，并且叫做叫做显示原型属性

      function Person() {}
      var p = new Person();
      //默认输出的是一个Object空的实例对象，这就是Person的原型对象
      console.log(Person.prototype);
      

   2. 下面来看一下通过Person 所构造的实例对象身上有什么属性

      function Person() {}
      var p = new Person();
      //默认输出的是一个Object空的实例对象
      console.log(Person.prototype);
      //在javascript中 实例对象会默认添加一个属性叫__proto__，叫做实例对象的隐式原型属性
      //打印会发现Person.prototype和p.__proto__属性一毛一样
      console.log(p.__proto__); 
      

   3. 一模一样是不是这两个属性就是一样的，来看一下

      console.log(p.__proto__ == Person.prototype); //true
      //这也就引出，javascript中实例对象的隐式原型属性等于构造函数的显示原型属性,记住这句话有用就完了
      

   4. constructor属性, constructor属性存在于原型对象中，他指向了构造函数

      function Person() {};
      var p = new Person();
      //所以Person.prototype.constructor == Person
      console.log(Person.prototype.constructor == Person) //true
      

   5. 根据需要，可以将Person.prototype属性指向新的对象，作为Person的原型对象，并且新对象的constructor不在指向Person构造函数

      function Person() { };
      var p = new Person();
      //直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
      Person.prototype = {
        name: 'alexbai',
        age: 20
      }
      console.log(Person.prototype); //Object对象
      //如果你需要constructor，你需要这样做
      Person.prototype = {
        constructor: Person	//让constructor重新指向Person函数
      }
      

3. 有了上面的知识储备，来看一下平时所说的原型链到底是什么

    先看一段代码：
   

   1. function Person(){};
      //为Person的原型对象上添加一个方法，叫speak，所以此时Person的原型对象上就多了一个speak方法
      Person.prototype.speak = function (){
        console.log('speak');
      }
      var p = new Person();
      //可以通过Person的实例对象进行调用，此处就是使用了原型链的概念，也就是用到__proto__
      p.speak() 
      //此时调用toString()方法，但是通过打印，实例对象上并没有toString ==》没有就通过原型链__proto__继续向上查找，最后在Object的实例对象上找到
      console.log(p.toString());
      

   2. 这里需要需要，所谓的原型链，其实正是利用了–proto-- 属性一级一级查找，直到尽头，这就是所说的原型链

结尾 :

原型和原型链是javascript的很重要一部分，也是在编程中所需要的，以前我也是乱乱的，似懂非懂状态，想要学好这块知识，建议可以独立用自己的语言将所这块知识点描述清楚