JS原型和原型链（图解）

原型：

（粉色图）

话不多说，直接上图！！以下所有内容看图解释，慢慢阅读就能理解啦( ๑ˊ•̥▵•)੭₎₎

function Person(name, age) {
          this.name = name;
          this.age = age;
        }
        var person1 = new Person('张三', 18);

首先我们创建一个构造函数叫Person在这个构造函数身上，我们所看见的这段代码就是（如图左上角的）Person函数，不是Person函数原型。

1.函数：在它的体内有两个指针prototype（显式原型）和__proto__（隐士原型），所有函数的__proto__都指向Function（图中右下角有总结），在这里我们就直接理解__proto__就是指向自己被创建的原型。而prototype则指向自身的函数原型对象，看图指向。

与Function：

console.log(Person.__proto__==Function.prototype);//true

2.函数原型对象：体内含有两个指针cunstructor（构造）和__proto__（原始的）,所有的原型对象都是Object函数对象构造出来的,因此，Person的__proto__指向Object函数原型对象。而体内构造函数cunstructor则指向本身函数。本身函数内的方法也就是放在函数体内部的数据块。

内部：创建的对象为person1，此时解释new关键字的作用：

new关键字的步骤：

      1. 创建了一个新对象

      2. 将构造函数的this指向了这个新对象

      3. 将新对象的__proto__属性 指向构造函数 的prototype属性 （构造函数的原型对象）

      4. 执行构造函数

      5. 返回this

所以有：

console.log(person1.__proto__ === Person.prototype); // true
console.log(Person.prototype.constructor === Person); // true

 原型链：

既然我们理解了原型的对象之间关系，那么原型链就很好理解了

1.我们知道person1.__proto__ === Person.prototype：且Object的原型对象的__proto__指向null

console.log(person1.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(person1.__proto__.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null
console.log(person1.__proto__.__proto__.__proto__ === null); // true

2. Function顶层没有人构造 自己构造了自己

console.log(Function.__proto__ === Function.prototype); // true

3.所有函数原型对象的__proto__都指向Object函数原型对象，Function也不例外！

console.log(Function.__proto__.__proto__ === Object.prototype); // true

4.当然，所有函数的__proto__都指向Function函数原型对象，Object也不例外！

console.log(Object.__proto__ === Function.prototype); // true

那么我们可以推导：

console.log(Object.__proto__.__proto__ === Object.prototype); // true
console.log(Object.__proto__.__proto__.__proto__); // null
console.log(Function.__proto__.__proto__.__proto__); // null

其他的可以自己去推导。原型链我们就可以理解为是一条各个函数的链，他们由__proto__所连接起来的一条原型链！！对象查找元素则会从本身被查找的方法去寻找，未找到就会自身加一个__proto__再去寻找，未找到才返回undefined。

而且我们输出person1对象可以看出（浏览器控制台）：

function Person(name, age) {
      this.name = name;
      this.age = age;
    }
    Person.prototype={id:20};
    Person.prototype.num=30;
    var person1 = new Person('张三', 18);
    console.log(person1);//Person
    console.log(person1.age);//18
    console.log(person1.__proto__.age);//30

而原型链作用呢：

在Object的原型对象上写入num，person1上就会先在__proto__去找
没有就再加一级__proto__去找，则在Object的原型对象中找到！
而不是在Person函数里面去找，不懂回去看new关键字的作用！

    Function.prototype.num=88;
    Object.prototype.num=99;
    console.log(person1.num);//99

所以，所有的函数原型链上的起源都是Object！！！

这就是原型链