前端知识梳理之原型链

首先理解三个概念：

构造函数：在js中可以用new关键字来调用的函数称为构造函数，首字母一般是大写。通俗的也可以理解成你自己声明的函数如：

javascript 复制代码

  -//我是构造函数Students
  
  function Students(name, age){
      this.name = name
      this.age = age
      this.say = function(){
          console.log('我叫'+this.name+',我今年'+this.age +'岁')
      }
  }

原型对象：在你声明了一个Students函数之后，浏览器会自动按照一定的规则创建一个对象，这个对象就叫做你声明的这个函数Students的原型对象，我们给这个对象取个名字叫StudentObject。
函数实例：实例就可理解成实际的一个例子，就是你给声明的构造函数调用new方法后得到的结果。例如： let stu = new Students('小明', 3) 这个 stu就是实例。

当你声明了一个构造函数后，此时，这个构造函数中会自动产生一个隐藏的属性prototype指向这个构造函数的原型。即：Students.prototype = StudentObject。原型对象中则有一个属性constructor（constructor属性，用于记录实例是由哪个构造函数创建），这个属性指向的是这个构造函数（你声明的函数），即 StudentObject.constructor = Students,我们把他们的关系整理一下就可以得到下面这个关系图：

然后我们再加入实例，实例是怎么创造的我们已经知道了（即给构造函数调用new方法），那么实例和原型对象又有什么关系呢？这里我们需要再了解一个知识点：

js分为「函数对象」和「普通对象」，每个对象都有__proto__属性，但是只有函数对象且「非箭头函数」才有prototype属性。
__proto__属性是一个隐式属性，指向的是它的构造函数的原型 ，如: let a = new Object(); 那么 a.__proto__ = Object.prototype，注意这里是Object.prototype.

运用到我们的案例中，就可以知道 stu.__proto__ === StudentsObject,然后我们再把我们的关系图修改一下：

在通过对象访问属性时，会按照这个属性的名称开始搜索。搜索开始于对象实例本身。如果在这个实例上发现了给定的名称，则返回该名称对应的值。如果没有找到这个属性，则搜索会沿着指针（就是沿着__proto__属性）进入原型对象，然后在原型对象上找到属性后，再返回对应的值。

假如我们现在的原型对象StudentsObject又是另外的一个构造函数的实例，即 let StudentsObject = new Boyobject();

即：

ini 复制代码

`function BoyObject (){
};

BoyObject.prototype.sex = 'BOY'
let StudentObject = new Boyobject()
`

那么当我们的实例stu调用sex属性的时候，即stu.sex 。stu自己本身没有sex属性，就会沿着__proto__去找它的原型StudentsObject，而StudentsObject上也没有sex属性，则接着找StudentsObject的原型，即BoyObject.prototype,此时BoyObject.prototype的sex 属性值为 'BOY'，找到了就返回给stu.sex，最后我们调用stu.sex 得到的值就是'BOY'，这样就称之为原型链继承。

多个构造函数、实例、原型对象之间按照这种规则方式的组成就是原型链。