原型模式故事鏈--new一個對象的過程

上一個總標題：https://segmentfault.com/a/11...
提問：你有對象了嗎？
答：沒有。
笨！new一個不就行了嗎！

問題點：爲何我要理解new一個對象的過程？
答：不理解這個過程，你就不知道爲何只是new了一下，這個實例就能使用原型的各類方法。

new一個對象的過程：須要經歷4個步驟，結合上一章原型模式爲例。
var cat = new Animal('橘貓');

1.建立一個新的空對象。
var cat = {}

2.設置新的對象的隱式原型指向其構造函數的顯式原型
cat._proto_ = Animal.protype

3.執行構造函數代碼，this指向這個新的對象。
Animal.call(cat)

4.返回該對象（返回this）
var cat = new Animal();
(把返回的對象保存到變量cat中，因此這個cat就是這個對象的實例，因此cat自己也是一個對象)

好啦，你有一個對象了。你脫單了。
若是仍是比較難以理解那我通俗點的講：
原先的代碼長這個樣子。

//構造函數
    function Animal(name){
        this.name = name;
        //爲何在原型裏的方法放到構造函數裏呢，由於2.設置新的對象的隱式原型指向其構造函數的顯式原型
        this.eat = function(val){
            console.log(this.name + ' like eat '+ val);
        }
    }

使用了new操做符後就變成了這樣。

//構造函數
    function Animal(name){
        //1.建立一個空的對象（爲了方便理解咱們讓這個對象就叫this）
        var this = {};
        
        //3.執行構造函數代碼，往this裏添加屬性和方法。
        this.name = name;
        this.eat = function(val){
            console.log(this.name + ' like eat '+ val);
        }
        
        //4.返回該對象（返回this）
        return this;
    }

因此當咱們 var cat = new Animal('橘貓');
就至關於 var cat = this; //this裏面的方法屬性cat均可以用。

驗證：咱們去驗證一下，是否作了以上這幾件事。
驗證步驟2：
在控制檯輸出一下日誌：

由上圖能夠看到，cat._proto_和 Animal.protype是徹底相等的。說明2成立。

驗證一下步驟3和4：

//構造函數
    function Animal(name){
        this.name = name;
        console.log('this:',this)
    }
    
    // 原型
    Animal.prototype = {
        eat:function(val){
            console.log(this.name + ' like eat '+ val);
        }
    }
    
    Animal();//window

由上面能夠看出，沒有實例化時（沒有new時），this指向的是window.
那麼來看看new後this是否會指向這個新對象。

//構造函數
    function Animal(name){
        this.name = name;
        console.log('this:',this)
    }
    
    // 原型
    Animal.prototype = {
        eat:function(val){
            console.log(this.name + ' like eat '+ val);
        }
    }

    // 實例化
    var cat = new Animal('橘貓');

    console.log('cat就是：',cat)

控制檯輸出日誌以下：

二者徹底相同，由此咱們能夠驗證步驟3和4成立。執行了構造函數且this指向這個新對象。

問題：隱式原型和顯式原型是什麼？爲何cat能調用顯式原型裏的東西？
下一回：原型鏈 https://segmentfault.com/a/11...