JavaScript原型繼承中的 constructor

Steve_Wang_ 發布于2019-08-21 16:48 / 359人閱讀

摘要：聽起來確實有點懵逼書中示例大概就說明了是指向它的類的默認情況下好了，下面我們來看看下面的繼承行留意下面這一句的作用注釋掉后的結果會發現，去掉這句還是能調用類構造函數并能成功得出想要的結果。

轉載請注明出處----在河東

    磚頭書中有道: 在默認情況下，所有原型對象都會自動獲得一個 Constructor (構造函數)屬性，這個屬性
是指向prototype 屬性所在函數的指針。  （聽起來確實有點懵逼）
    書中示例：

function    Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = functon(){
    console.log(this.name);
}

大概就說明了constructor是指向它的類的（默認情況下）

好了，下面我們來看看下面的繼承：

    function SuperType(name){
        this.name = name;
        this.colors = ["red","blue","green"];
    }
    SuperType.prototype.sayName = function(){
        console.log(this.name);
    }
    function SubType(name , age){
        SuperType.call(this,name);
        this.age = age;
    }
    /**12行*/SubType.prototype = new SuperType();
    //留意下面這一句的作用
    SubType.prototype.constructor = SubType;
    SubType.prototype.sayAge = function(){
        console.log(this.age);
    }
    var instance1 = new SubType("HEDONGHUI",22);
    instance1.colors.push("black");
    console.log(instance1.colors);
    instance1.sayName();
    instance1.sayAge();

    var instance2 = new SubType("heod",23);
    console.log(instance2.colors);
    instance2.sayName();
    instance2.sayAge();

注釋掉 SubType.prototype.constructor = SubType; 后的結果：

會發現，去掉這句instance1 , instance2 還是能調用Subtype類構造函數并能成功得出想要的結果。那么問題來了，這句話在原型繼承中的作用是什么呢？

從前文我們知道，原型的constructor 默認指向原對應的類型。第12行執行完后，SubType原型（SubType.prototype）
指向了SuperType的實例對象，而SuperType的實例對象的構造器是構造函數SuperType，所以
SubType.prototype.constructor就是構造對象SuperType了（換句話說，SuperType構造了SubType的原型）。

這里實例instance1 ,SubType.prototype.constructor都為 SuperType。這就導致了
SubType.prototype === instance1.constructor.prototype 為false; 這樣會令人產生費解，既然在一開始中
（前文）說到原型指向所在的類型，一般情況下，instance1.constructor為SubType 。 SubType.prototype ===
SubType.prototype的。由于第12行代碼實現了，SubType 繼承 SuperType導致了 SubType.prototype.constructor
指向了SuperType(),因此，這行代碼的作用就是為了修正因為繼承SuperType對象所有成員后，SubType的構造器也指向了SuperType.

那么，為什么注釋掉也能正確調用SubType()構造函數去實例化instance1呢?

雖然instance1.constructor ===SuperType() 返回true, 但對于執行第12行來說，SubType.prototype實例化了
繼承來的父類的方法和屬性。在 instance1 = new SubType("heodnghui",22)中，instance1.__proto__由于
SubType.prototype指向了SuperType 而被修改為 SuperType。 因此也獲得了父類繼承來的屬性和方法
（盡管constructor也指向了SuperType）

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

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

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

重新認識JavaScript面向對象: 從ES5到ES6

摘要：基于原型的面向對象在基于原型的語言中如并不存在這種區別它只有對象不論是構造函數，實例，原型本身都是對象。允許動態地向單個的對象或者整個對象集中添加或移除屬性。為了解決以上兩個問題，提供了構造函數創建對象的方式。 showImg(https://segmentfault.com/img/remote/1460000013229218); 一. 重新認識面向對象 1. JavaScript...

VishKozus 2019-08-30 13:56 評論0 收藏0
重新認識JavaScript面向對象: 從ES5到ES6

摘要：基于原型的面向對象在基于原型的語言中如并不存在這種區別它只有對象不論是構造函數，實例，原型本身都是對象。允許動態地向單個的對象或者整個對象集中添加或移除屬性。為了解決以上兩個問題，提供了構造函數創建對象的方式。 showImg(https://segmentfault.com/img/remote/1460000013229218); 一. 重新認識面向對象 1. JavaScript...

用戶83 2019-08-26 11:38 評論0 收藏0
前端面試題 -- JavaScript (一)

摘要：前言前兩天總結了一下方面的面試題傳送門，今天翻看了一些面試中常見的幾個問題只是一部分，會持續更新，分享給有需要的小伙伴，歡迎關注如果文章中有出現紕漏錯誤之處，還請看到的小伙伴留言指正，先行謝過以下有哪些數據類型種原始數據類型布爾表示一個邏輯前言前兩天總結了一下HTML+CSS方面的面試題 (傳送門)，今天翻看了一些 JavaScript 面試中常見的幾個問題（只是一部分，會持續更新...

junnplus 2019-08-23 15:59 評論0 收藏0
JavaScript 原型中的哲學思想

摘要：而作為構造函數，需要有個屬性用來作為以該構造函數創造的實例的繼承。歡迎來我的博客閱讀：「JavaScript 原型中的哲學思想」記得當年初試前端的時候，學習JavaScript過程中，原型問題一直讓我疑惑許久，那時候捧著那本著名的紅皮書，看到有關原型的講解時，總是心存疑慮。當在JavaScript世界中走過不少旅程之后，再次萌發起研究這部分知識的欲望，翻閱了不少書籍和資料，才搞懂...

sugarmo 2019-08-19 18:38 評論0 收藏0