JS原型和原型链（详解）

---

前言

将下面几行代码写在JS最前面，User是笔者自定义的函数，它是普通对象person1 ，person2 的构造函数，其中eat，drink，play，enjoy是User的原型对象。
普通对象person1，person2是通过new自定义函数创建出来的，属于实例对象。

function User() { }
User.prototype.eat = function () { }
User.prototype.drink = function () { }
User.prototype.play = function () { }
User.prototype.enjoy = function () { }
User.prototype.shangdan = "theshy";

var person1 = new User();
var person2 = new User();
person1.luosifen = "柳州";
console.log(person1);

学习原型之前，先明白构造函数是什么

---

一、构造函数

所有的对象都是通过new 函数创建的，该函数叫做构造函数；
【函数也是一个对象，是通过new Function创建的】；
相信大家看完下面这张图能够搞懂构造函数；

console.dir(User);//自定义函数
console.dir(Array);//数组函数
console.dir(Function);//（函数）函数
console.dir(Object);//对象函数
console.log(User instanceof Function);//true
console.log(Array instanceof Function);//true
console.log(Function instanceof Function);//true
console.log(Object instanceof Function);//true

---

二、prototype原型

所有的函数都有原型prototype，默认情况下prototype是一个object对象（特殊：Function的prototype是一个function）；
像User，Array，Function，Object等等这些都是函数；
函数中原型prototype中的constructor指向函数本身。

console.log(User.prototype);//{shangdan: 'theshy', eat: ƒ, drink: ƒ, play: ƒ, enjoy: ƒ, …}
console.log(Array.prototype);//[constructor: ƒ, at: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, …]
console.log(Function.prototype);//ƒ () { [native code] }
console.log(Object.prototype);//{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}

---

三、__proto__隐式原型

温馨提示：对照着下面的图，能够很快理解阐述的文字

1.对象的隐式原型

所有的对象都有隐式原型__proto__属性；
隐式原型是一个对象，对象的隐式原型__proto__指向创建该对象的构造函数的原型prototype；
所有的函数的隐式原型都指向Function的原型；

拿自定义函数来举例：

注意：Function的隐式原型指向它自己的原型。

console.log(person1.__proto__ === User.prototype);//true
console.log(person2.__proto__ === User.prototype);//true
console.log(User.__proto__ === Function.prototype);//true
console.log(Array.__proto__ === Function.prototype);//true
console.log(Function.__proto__ === Function.prototype);//true
console.log(Object.__proto__ === Function.prototype);//true

2.函数原型的隐式原型

函数原型的隐式原型，指向Object的原型，这是因为：
函数原型也是对象，对象的构造函数就是Object，所以函数原型的隐式原型，指向创建函数原型的构造函数Object的原型
注意：Object原型的隐式原型指向null。废话少说看下图。

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

---

四、原型链

原型链也叫隐式原型链，是由__proto__属性串联起来的，整个查找过程就是一步一步顺着__proto__往上查找，形成了像链条一样的结构，这个结构就是原型链。
原型链的尽头是null。
如果对象在自己这里找不到对应的属性或方法，就会往它的构造函数的原型对象查找，如果上面有这个属性或方法，就会返回。
如果构造函数的原型对象上也没有找到对应的属性或方法，就会接着往它的构造函数的原型对象上去找，这里就是查找的终点了，在这里找到就返回，找不到就不在往上查找了（null里面啥也没有），返回undefined。

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

console.log(person1.luosifen);//"柳州";
console.log(person1.shangdan);//"theshy";

回到最一开始笔者在前言里写的自定义函数那一块，person1对象只有luosifen所以直接返回"柳州"，对象里面并没有shangdan，于是就会往person1的构造函数User的原型对象查找，结果查到了，就返回"theshy"。

---

如有不对的地方请指正~~~