最近要准备去面试了，再翻书时发现之前学知识跟盖了个豆腐渣工程一样，一推就倒，为了保证知识体系的完整及坚固。才有了这个学习系列，目的就是把自己学到的知识记录下来，以后翻翻看一看。这个系列会持续到觉得自己觉得前端学会了为止。
虽然说是重翻红宝书，但其实只是借鉴一下，还是要翻一翻大佬们的知识的。
今天来说一下原型和原型链，强烈推荐链接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，这个指向过程连成的线，就是原型链。
原型链
终极大佬图【就是因为看不懂这个图，才研究了半天】
终极大佬图
搞定，有疑问请评论，看到会及时回复。
网友评论