最近要準(zhǔn)備去面試了隆判，再翻書時(shí)發(fā)現(xiàn)之前學(xué)知識(shí)跟蓋了個(gè)豆腐渣工程一樣，一推就倒僧界，為了保證知識(shí)體系的完整及堅(jiān)固侨嘀。才有了這個(gè)學(xué)習(xí)系列，目的就是把自己學(xué)到的知識(shí)記錄下來捂襟，以后翻翻看一看咬腕。這個(gè)系列會(huì)持續(xù)到覺得自己覺得前端學(xué)會(huì)了為止。
雖然說是重翻紅寶書葬荷，但其實(shí)只是借鑒一下涨共，還是要翻一翻大佬們的知識(shí)的。

今天來說一下原型和原型鏈闯狱，強(qiáng)烈推薦鏈接1煞赢。

先插入2個(gè)參考的學(xué)習(xí)鏈接
掘金-三張圖搞懂JavaScript的原型對(duì)象與原型鏈
知乎-JavaScript 世界萬(wàn)物誕生記

【萬(wàn)物皆空】

原型的最原始是個(gè)null（這是知識(shí)點(diǎn)）

【萬(wàn)物皆對(duì)象】

JavaScript中的一切皆為對(duì)象

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每個(gè)函數(shù)都有一個(gè)prototype，可以理解它是一個(gè)共享倉(cāng)庫(kù)哄孤，倉(cāng)庫(kù)里有著可以共享的屬性和方法照筑。prototype默認(rèn)是一個(gè)對(duì)象

// 字面創(chuàng)建
var n = {}
這也是構(gòu)造一個(gè)新實(shí)例，但是是參考Object創(chuàng)建的瘦陈。Object.__proto__ === null 最后我會(huì)貼張圖凝危，就能理解這一行了。
// 構(gòu)造器創(chuàng)建非共享方法
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時(shí)晨逝，會(huì)在內(nèi)存中新開辟空間來分別存儲(chǔ)a和b蛾默，所以兩個(gè)play方法指向的其實(shí)是2個(gè)不同的位置。

// 構(gòu)造器公共方法
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
原因：把玩這個(gè)方法寫在了公共的方法里捉貌，所以說LaoTian和XiaoTian玩的是一個(gè)球

__proto__是一個(gè)對(duì)象擁有的內(nèi)部屬性支鸡，可以理解是個(gè)指路牌冬念，指引你到達(dá)構(gòu)造函數(shù)（原型對(duì)象）的共享倉(cāng)庫(kù)中去。

//__proto__指向它參照（原型）對(duì)象的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

【通用認(rèn)知】

對(duì)象（普通對(duì)象和函數(shù)對(duì)象）都有__proto__, 函數(shù)有prototype牧挣。

大概的樣子

通常來說急前，對(duì)象的__proto__指向函數(shù)的prototype，但是object.creat()除外瀑构。
對(duì)象是由函數(shù)生成的裆针。

通常是這樣的

【特殊注意】

1.當(dāng)對(duì)象是object.creat()創(chuàng)建時(shí)是怎么指向的呢.

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

特殊指向

2.Function的__proto__和prototype關(guān)系

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

【總結(jié)】

說了半天，解釋了一下prototype和__proto__好像也沒說到底是什么是原型鏈寺晌，畫個(gè)圖吧世吨。

var Fn = function(){};
var fnn = new Fn();
// 此圖參考鏈接1，這個(gè)指向過程連成的線呻征，就是原型鏈耘婚。

原型鏈

終極大佬圖【就是因?yàn)榭床欢@個(gè)圖，才研究了半天】

終極大佬圖

搞定怕犁，有疑問請(qǐng)?jiān)u論边篮，看到會(huì)及時(shí)回復(fù)。