这是我参与8月更文挑战的第31天，活动详情查看：8月更文挑战

前言：

大家好啊，又见面了，我是loncon，一个前端路上不断探索的小白。相信很多小伙伴在面试中多多少少会遇到原型原型链的理解问题，这里写上本人的拙见，希望能给大家带来些帮助。

任何一个对象，都有原型对象，而原型对象本身也是对象，也有自己的原型对象，这样一环扣一环就形成了一个链式结构，我们把这个链式结构称为：原型链。
任何对象都有__proto__属性，指向当前的原型对象。

arr.__proto__ === Array.prototype // true

而原型对象也是个对象，也有自己的__proto__属性，指向原型对象的原型对象

Array.prototype.__proto__ === Object.prototype // true

大白话：孩子有他的爸爸，他的爸爸也是个孩子，也有自己的爸爸，原型链在生活中是族谱的意思。

函数都有prototype属性，不只是构造函数，prototype属性值就是原型。任何对象都有__proto__属性，指向当前构造函数的prototype属性的值，即原型对象要想访问原型对象有两种途径：
1.构造函数通过prototype属性访问到原型对象
2.实例对象通过__proto__属性访问到原型对象

通过构造函数创建出来的实例对象，可以直接去访问这个构造函数的prototype属性上的任意成员。

只有用的份，没有修改的权力。

所以把公共函数挂到原型上，构造出来的实例都能使用这个方法。

$('body')也是JQ实例对象，能使用jQuery的原型对象的任意成员

<script>
    function Person(){
      console.log('我是构造函数内容');
    }
    Person.prototype.color='red'
    Person.prototype.sayHi =function(){
        console.log('hello')
    }
    var p =new Person()
    var p2 =new Person()
    console.log(Person.prototype);
    console.log(p.color);
    p.sayHi()
    console.log(p2.color);
    p2.sayHi()
    console.log(p.sayHi === p2.sayHi);

  </script>
  
  //打印结果：
我是构造函数内容
sa.html:11 我是构造函数内容
sa.html:19 {color: "red", sayHi: ƒ, constructor: ƒ}
sa.html:20 red
sa.html:15 hello
sa.html:22 red
sa.html:15 hello
sa.html:24 true

实例对象p的原型链.png

可以看出，上例中存在一个从arr到null的原型链，如下：

p----proto---->Person.prototype----proto---->Object.prototype----proto---->null

__protp__专栏

注意点：

它不是个标准的属性，存在兼容问题，IE678不支持该属性，不要再代码中使用该属性

即不要： p.proto.color = 'red',不要这样操作原型对象，会有兼容问题

所以要： Person.prototype.color = 'red' 要这样操作原型对象

优点：

项目不上线，只是做演示，可以使用，而且在不知道构造函数是什么的情况下，比如jQuery的JQ的实例对象，不知道是那个函数构造出来的，就可以直接通过

$('body').proto 查看到JQ对象的原型对象

jQuery.prototype 也可以查看JQ对象的原型对象

constructor属性专栏

原型对象自带constructor属性，Person.prototype.constructor ---->指向构造函数

后记

不知不觉八月最后一天了，挑战收官，感谢大家的支持

前端小白不迷路 - 今天来讲下面试高频问点-原型和原型链

前言：

后记