前端重学之路——重翻红宝书_原型原型链

最近要准备去面试了，再翻书时发现之前学知识跟盖了个豆腐渣工程一样，一推就倒，为了保证知识体系的完整及坚固。才有了这个学习系列，目的就是把自己学到的知识记录下来，以后翻翻看一看。这个系列会持续到觉得自己觉得前端学会了为止。
虽然说是重翻红宝书，但其实只是借鉴一下，还是要翻一翻大佬们的知识的。

今天来说一下原型和原型链，强烈推荐链接1。

先插入2个参考的学习链接
掘金-三张图搞懂JavaScript的原型对象与原型链
知乎-JavaScript 世界万物诞生记

【万物皆空】

原型的最原始是个null（这是知识点）

---

【万物皆对象】

JavaScript中的一切皆为对象

function Person(name) {
  this.name = name;
  this.play = function () {
    console.log(`${name}在玩球`);
  }
}
let a = new Person('LaoTian');
let b = new Person('XiaoTian');
typeof a.__proto__;       // object
typeof b.__proto__;       // object
typeof Person.prototype;  // object

---

【原型基本概念】

prototype每个函数都有一个prototype，可以理解它是一个共享仓库，仓库里有着可以共享的属性和方法。prototype默认是一个对象

// 字面创建
var n = {}
这也是构造一个新实例，但是是参考Object创建的。Object.__proto__ === null 最后我会贴张图，就能理解这一行了。
// 构造器创建非共享方法
function Person(name) {
  this.name = name;
  this.play = function () {
    console.log(`${name}在玩球`);
  }
}
let a = new Person('LaoTian');
let b = new Person('XiaoTian');
a.play === b.play // false
原因：在new时，会在内存中新开辟空间来分别存储a和b，所以两个play方法指向的其实是2个不同的位置。

// 构造器公共方法
function Person(name) {
  this.name = name;
}
Person.prototype.play = function() {
  console.log('玩球');
}
let a = new Person('LaoTian');
let b = new Person('XiaoTian');
a.play === b.play // true
原因：把玩这个方法写在了公共的方法里，所以说LaoTian和XiaoTian玩的是一个球

__proto__是一个对象拥有的内部属性，可以理解是个指路牌，指引你到达构造函数（原型对象）的共享仓库中去。

//__proto__指向它参照（原型）对象的prototype
function Person(name) {
  this.name = name;
}
Person.prototype.play = function() {
  console.log('玩球');
}
let a = new Person('LaoTian');
let b = new Person('XiaoTian');
a.__proto__ === Person.prototype; // ture 
b.__proto__ === Person.prototype; // true
a.__proto__ === b.__proto__;      // true

---

【通用认知】

对象（普通对象和函数对象）都有__proto__, 函数有prototype。

大概的样子

通常来说，对象的__proto__指向函数的prototype，但是object.creat()除外。
对象是由函数生成的。

通常是这样的

---

【特殊注意】

1.当对象是object.creat()创建时是怎么指向的呢.

var a1 = {} 
var a2 = Object.create(a1);

特殊指向

2.Function的__proto__和prototype关系

Function.__proto__ === Function.prototype; // true

---

【总结】

说了半天，解释了一下prototype和__proto__好像也没说到底是什么是原型链，画个图吧。

var Fn = function(){};
var fnn = new Fn();
// 此图参考链接1，这个指向过程连成的线，就是原型链。

原型链

终极大佬图【就是因为看不懂这个图，才研究了半天】

终极大佬图

搞定，有疑问请评论，看到会及时回复。