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

edgardeng 發布于2019-08-23 12:30 / 1930人閱讀

摘要：設置新的對象的隱式原型指向其構造函數的顯式原型執行構造函數代碼，指向這個新的對象。驗證一下步驟和構造函數原型由上面可以看出，沒有實例化時沒有時，指向的是那么來看看后是否會指向這個新對象。

上一個總標題：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...

云服務器 GPU云服務器 js原型鏈的繼承原型模式原型原型鏈原型鏈

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98625.html

原型模式故事鏈(2)--原型鏈的四大理論

摘要：所有引用類型的隱式原型指向它構造函數的顯式原型。理論就不驗證了，寫原型模式時。原型模式構造函數原型實例化橘貓魚呀魚橘貓魚呀魚在上述代碼中，在之后就相當于這個函數。上一章：new一個對象的過程 https://segmentfault.com/a/11... 原型鏈4大理論：1.所有的引用類型都有一個_proto_屬性，稱之為隱式原型。 2.所有的函數(Function)都有一個pro...

MRZYD 2019-08-29 17:04 評論0 收藏0
原型模式故事鏈(2)--原型鏈的四大理論

摘要：所有引用類型的隱式原型指向它構造函數的顯式原型。理論就不驗證了，寫原型模式時。原型模式構造函數原型實例化橘貓魚呀魚橘貓魚呀魚在上述代碼中，在之后就相當于這個函數。上一章：new一個對象的過程 https://segmentfault.com/a/11... 原型鏈4大理論：1.所有的引用類型都有一個_proto_屬性，稱之為隱式原型。 2.所有的函數(Function)都有一個pro...

Meils 2019-08-02 11:47 評論0 收藏0
原型模式故事鏈(2)--原型鏈的四大理論

摘要：所有引用類型的隱式原型指向它構造函數的顯式原型。理論就不驗證了，寫原型模式時。原型模式構造函數原型實例化橘貓魚呀魚橘貓魚呀魚在上述代碼中，在之后就相當于這個函數。上一章：new一個對象的過程 https://segmentfault.com/a/11... 原型鏈4大理論：1.所有的引用類型都有一個_proto_屬性，稱之為隱式原型。 2.所有的函數(Function)都有一個pro...

MarvinZhang 2019-08-23 12:31 評論0 收藏0