程序員花1.5小時總結：JavaScript原型繼承中的 constructor
磚頭書中有道: 在默認情況下，所有原型對象都會自動獲得一個 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是指向它的類的（默認情況下）
這篇文章共享之前我仍是要引薦下我自個的前端群：657137906，不論你是小白仍是大牛，小編我都挺期待，不定期共享乾貨，包含我自個整理的一份2017最新的前端材料和零根底入門教程，期待初學和進階中的小夥伴。
好了，下面我們來看看下面的繼承：
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）最後在說幾句：
厲害程序員相對於普通程序員的優勢在於：
寫出的代碼更容易排錯，不是高手的代碼就不會錯，而是高手的代碼出了錯容易找。高手的代碼可讀性一定很好，模塊清晰，命名規範，格式工整，關鍵的地方有註釋，出了異常有log，自然容易排錯，即使交給別人去debug也是比較容易的。
今天這個圖片彈窗特效到這裡寫完了，學習web前端的可以加我的群，每天分享對應的學習資料：657137906，歡迎初學和進階中的小夥伴。多寫多練。
如果想看到更加系統的文章和學習方法經驗可以關注我的微信公眾號：‘前端根據地’關注後回覆‘給我資料’可以領取一套完整的學習視頻
相關推薦
