JavaScript的原型，原型鏈到底是什麼！看完這篇絕對會有感悟~

JavaScript 原型鏈

平常老聽別人說什麼原型鏈，我總是半知半解的，終於有時間好好梳理一下！給大家介紹我老婆。

圖解

我們先來看一下這張圖，不理解沒關係，我來慢慢解釋，先有個印象！當然結衣父母也可以生男孩（我覺得還是生女孩好 ohhhhhh）

關卡1：通過構造函數 => new一個對象

聽說您還沒有對象？沒關係，我來給你new一個！

	// 1. 首先通過構造函數，初始化一個女孩兒
    function Girl(name, age, bustSize) {
        this.name = name;
        this.age = age;
        this.bustSize = bustSize;
        this.show = function () {
            console.log(`初次見面，我叫${this.name},請多指教！`);
        }
    }

    // 2. 實例化一個女朋友
    var girlfriend1 = new Girl('唐澤雪穗', 22, 'D');
    
    // 3. 女朋友的自我介紹
    girlfriend1.show();		//初次見面，我叫唐澤雪穗,請多指教！

以上實例，我們可以知道，通過構造函數能夠new一個老婆對象 出來。

關卡2：實例化對象 => 原型對象

我們再來看看 girlfriend1裏都有些什麼吧！

console.log(girlfriend1);

• 我們發現，除了我們定義的年齡，胸圍，名字和show方法之外，又多了一個__proto__，這個我們沒寫呀！！對，這個__proto__就是瀏覽器幫我們寫的。
• 其實，每一個對象都會有__proto__，他是實例化對象的原型對象。
• 你可以理解爲：我的對象，石原里美，她不是石頭縫裏蹦出來的石猴，而是我的可愛的老丈人生的，原型對象相當於爹。

我再給大家介紹另一個我的老婆。

	function Girl(name, age, bustSize) {
        this.name = name;
        this.age = age;
        this.bustSize = bustSize;
    }
    // 1. 這次我在Girl的原型上添加show方法
    Girl.prototype.show = function () {
        console.log(`初次見面，我叫${this.name},請多指教！`);
    }
    
    // 2. 實例化新老婆
    var girlfriend2 = new Girl('新垣結衣', 30, '');
    
    // 3. 老婆的自我介紹
    girlfriend2.show();
    
    // 4. 打印老婆
    console.log(girlfriend2);

• 我們發現，Girl類中並沒有show方法，而我在原型（爹）上添加了show方法，於是新垣結衣就問她的爹有沒有show方法，哎有！那就用！

關卡3.1：原型對象 => 構造函數

• 我們可以通過原型對象（結衣的爸爸），通過constructor知道他們的小孩（構造函數）長什麼樣（畢竟有一半的染色體呢）
  

關卡3.2：構造函數 => 原型對象

• 我們也可以通過小孩的特點（構造函數），通過DNA鑑定（prototype）來找到誰是我的親生父親（原型）。
  

最終關卡：無線循環

• 不知道您有沒有發現，一個神奇的循環

• 是不是有點理解了，又有點不理解了，發出豬叫 ，回過頭看看我的第一張圖~

隱藏關卡

原型鏈的機制

• 舉個栗子：爲什麼數組的方法那麼多呢？我們不妨打印一下：

	var arr = ['蒼井瑪麗亞', '小原好美', '雪之下雪乃'];
    console.log(arr);

• 我們可以看到，數組的原型上有好多好多的方法，數組沒有這種方法的話，就會找原型！
• 我在數組的原型上添加個新的方法

 	var arr = ['蒼井瑪麗亞', '小原好美', '雪之下雪乃'];
    Array.prototype.show = function () {
        console.log(1);
    }
    arr.show();			// 1
    console.log(arr);

• 那我在Object上添加這個方法，數組還能使用嗎？？？
  

• 總結一下：對象本身沒有這個方法的話，就去像他爹要，如果爹也沒有的話，就去找爺爺。

• 新垣結衣本身沒有show方法，就去找他的爹要show方法，爹要是沒有，就去找爺爺。

• 其實通過實踐，你也可以知道最大的爹是誰：Object，也就是說，如果Object也沒有 這個方法了，那麼就GG了。輸出Uncaught TypeError: arr.show is not a function。也就是找不到，拋出錯誤。

各種等式

我們還是以這個爲基礎

	function Girl(name, age, bustSize) {
        this.name = name;
        this.age = age;
        this.bustSize = bustSize;
    }
    Girl.prototype.show = function () {
        console.log(`初次見面，我叫${this.name},請多指教！`);
    }
    var girlfriend2 = new Girl('新垣結衣', 30, '');

這裏僅僅是舉幾個例子拋磚引玉

	// 新垣結衣的爸爸 == 新垣結衣兄弟的爸爸
    console.log(girlfriend2.__proto__ == Girl.prototype);   // true

    // 新垣結衣的爸爸的孩子 == 新垣結衣的兄弟s
    console.log(girlfriend2.__proto__.constructor == Girl); // true