我是誰,我來自哪,我是誰的誰
想必大家一定在學習或者開發過程常常被JS獨有的原型繼承撥過不少腦弦吧,為何不迎問題而上,直面解決這些謎團,今天就來總結一下Js的認親問題...
為開發需求選擇一種合適的繼承模式可以提高代碼的可讀性和便于排錯,從而提高我們的開發效率,因而今天就來總結一下ES5之前的繼承模式,ES6之后再進行補充或者另外討論
原型鏈模式-----------------------------------------------所有繼承模式的基礎
關鍵詞: 構造函數 原型對象 實例對象 原型對象為另一類型的實例
function SuperType(){ //超類構造函數 this.property = true; } SuperType .prototype.getSuperValue = function(){ //定義超類的原型方法 return this.property; }; function SubType(){ //父類的構造函數 this.subproperty = false; } SubType.prototype = new SuperType(); //重寫父類的原型對象,繼承超類 SubType.prototype.getSubValue = function(){ //定義父類獨有的原型方法 return this. subproperty; }; var instance = new SubType(); //實例化子類對象 alert(instance.getSuperValue()); //true //調用超類的原型方法 }
原型鏈的問題:
- 超類的實例屬性變成了子類的原型屬性,無法解決引用類型值被所有實例共享的問題.
- 創建子類型實例時無法向超類型的構造函數中傳遞參數
以上問題導致很少單獨使用原型鏈.
借用構造函數-------------------------------------------借用超類構造函數
關鍵詞:借用超類構造函數
function SuperType(){ this.name = name; } function SubType(){ SuperType.call(this,"LiAo"); this.age = 22; } var instance = new SubType(); alert(instance.name); //"Nicholas" alert(instance.age); // 22
借用構造函數的問題
- 與構造函數模式一樣,無法做到函數復用.
- 另外此時沒有使用原型鏈,所以子類無法調用超類的原型方法
組合繼承----------------------------------------結合借用構造函數和原型鏈
關鍵詞:
- 借用構造函數負責實現對實例屬性的繼承
- 原型鏈負責實現對原型屬性和方法的繼承(復用)
`function SuperType(name){
this.name = name;
this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function(){ //定義父類的原型方法
alert(this.name);
};
function SubType(name,age){
SuperType.call(this,name); //通過借用構造函數實現對實例屬性的繼承
this.age = age; //子類自身的實例屬性
}
SubType.prototype = new SuperType(); //通過原型鏈繼承超類
SubType.prototype.constructor = SubType; //恢復constructor的指向
SubType.prototype.sayAge = function(){ //定義父類獨有的原型方法
alert(this.age);
};
var instance = new SubType("LiAo",22);
`
組合繼承模式的優點
- 主要融合了原型鏈和借用構造函數模式的優點
- 可以用instanceof 和isPrototypeOf()來識別創建的對象類型
組合繼承模式的問題 - 無論在什么情況下,都會調用兩次超類型構造函數,一次是在子類型實例化的時候,第二次是在借用構造函數的時候,導致父類的原型對象會出現超類的實例屬性或方法,解決此問題的辦法先留個懸念....
原型式繼承-------------------------------------------------------敷衍式代孕
關鍵詞:基于已有對象創建新對象 對象關聯 生下就撤
工具函數:
function object(o){ function F(){}; //創建臨時類型 F.prototype = o; //讓臨時類型的原型對象指向傳入的對象(繼承) return new F(); //返回這個臨時類型的實例(返回后就撤!) }
其實仔細觀察這個函數,會發現臨時類型F是起著代孕的作用,受人委托替傳入的媽媽對象生了個寶寶,生完后孩子還沒睜眼就悄然離開,所以寶寶只認當前的媽媽,有著媽媽的各種特征.
用法:
var mom = { name = Lily, hairColor: "black", skin:"white" } var baby = object(mom); baby.name = "Jack"; alert(baby.name) ; //"Jack" alert(baby.skin); //"white"
ES5規范通過Object.create()方法規范化原型式繼承
該函數接收兩個參數:
①用作新對象原型的對象
②為新對象定義額外屬性的對象(可選),格式與Object.defineProperties相同,每個屬性都是通過自己的描述符定義的.
該函數的缺點:只能定義額外屬性,不能定義額外方法
原型式繼承的優點
- 拋棄了構造函數,而是把繼承簡化為對象之間的關聯
- 適用于想讓一個對象與另一個對象保持類似的情況下使用
原型式繼承的缺點
- 通過原型式繼承創建的對象是空對象,只不過是關聯了另一個對象,但是在很多時候,我們需要對新對象進行加強,而這時候雖然可以在新對象增添特有的屬性和方法,但是當我們需要很多個這樣的對象的時候,一個個去增添,就顯得很麻煩和難看,于是下面要將的寄生式繼承可以幫到我們
寄生式繼承----------------------------------------------------負責式代孕
關鍵詞: 增強對象 生完培養一會再撤
function createBaby(mom){ var baby = object(mom); baby.sayHi = function(){ alert("hi!); } return baby; }
看完你大概懂了吧,寄生式繼承類似原型式繼承,只不過在內部對新對象進行增強,這樣通過它產生的對象都是增強式的. 就好像一個負責的代孕媽媽,生完之后還要教會孩子一些技能,等到親媽來了再離開,不過戲劇化的是,這個孩子還是只認親媽(臥槽)
寄生式繼承的優點
- 解決了上面所提到的問題,可以快速新建一批增強式的對象.
寄生組合式繼承-----------------------------最完美的繼承方式(非最優雅)
關鍵詞:只要超類構造函數的原型對象,不要它本身
相信你還記得上面留下的懸念吧,組合式繼承會二次調用超類構造函數,寄生組合式繼承就是為了解決這個問題的,其配合一個工具函數使用:
function inheritPrototype(subType,superType){ var prototype = object(superType.prototype); //創建一個新對象,關聯超類構造函數的原型對象,不要構造函數 prototype.constructor = subType; //為新對象創建一個constructor指針并正確指向父類構造函數 subType.prototype = prototype; //重寫父類構造函數的原型對象為新對象 } function SuperType(name){ this.name = name; this.colors = ["red","blue","green"]; } SuperType.prototype.sayName = function(){ alert(this.name); }; function SubType(name,age){ SuperType.call(this,name); this.age = age; } inheritPrototype(SubType,SuperType); SubType.prototype.sayAge = function(){ alert(this.age); };
雖然寄生組合式繼承是引用類型最理想的繼承范式,但是我還是覺得代碼還是不夠優雅,如果要數優雅程度的話,那就離不開ES6這塊巨型語法糖了
上面介紹了的繼承模式有:
原型鏈
借用構造函數
組合繼承
原型式繼承
寄生式繼承
-
寄生組合式繼承
其中原型鏈和借用構造函數模式都有自己比較大的問題,組合繼承把兩者的優點融合在一起了,因此組合繼承比較常見,但是組合繼承也有自己的問題,而這個問題在寄生組合式繼承中得到解決,寄生組合式繼承代碼不是那么的優雅,但是是最理想的方式.
原型式繼承和寄生式繼承是一對兒,他們都拋棄了構造函數,而選擇一種新的思維來進行繼承------對象關聯,這種方式代碼最優雅.原型式新建立的對象是一個空對象,寄生式新建的對象則是一個增強的對象(用于大量生產).個人來說,原型式繼承和寄生式繼承是我比較順眼的模式 其他模式感覺都是為了使js這么語言向傳統的類繼承靠近的 其實js的本質就是對象關聯,而原型式繼承和寄生式繼承正體現了這一點 這兩種繼承各有各的適合情景,原型式繼承適合生產少量的對象后自己再進行增強 寄生式繼承適合生產大量的有類似功能的對象.
下面是我改寫寄生式繼承的一個工具函數
function createAndConnect(original,propertyObject){ var clone = Object.create(original); if(typeof propertyObject == "object"&&propertyObject!=null){ for(var key in propertyObject){ clone[key] = propertyObject[key]; } } return clone; }
多增添了一個用于加強對象的參數,就不用每次都得在內部加強了,而且使用方式顯得相對優雅一點,如:
var chinese ={ country: "China", language:"Chinese", getLanguage: function(){ console.log("我的母語是"+this.language); }, skin: "yellow", aveHeight:1.71, face:["nose","eyes","mouse"] } var chineseStudent =createAndConnect(chinese,{ name:"LiAo", //獨有屬性 height:0.1, //獨有屬性 score: 59, //獨有屬性 secondLanguage:"English", //獨有屬性 skin:"a little yellow", //重寫屬性 getSecondLanguage:function(){ console.log("我的第二門語言是"+this.secondLanguage); } }) console.log(chineseStudent.name); // "LiAo" console.log(chineseStudent.skin); // "a little yellow" console.log(chineseStudent.face); //["nose","eyes","mouse"] chineseStudent.getLanguage(); //我的母語是Chinese chineseStudent.getSecondLanguage(); //我的第二門語言是English
最后的話
在createAndConnect函數(意思是創建和鏈接)的第二個參數中,你可以指定新對象自己的屬性和方法,也可以"重寫"原型對象的屬性和方法,我認為這個才是js原型繼承的精髓即對象關聯.同時我也倡導大家用對象關聯的思維去開發js應用!
