JS 面向?qū)ο笾^承---多種組合繼承詳解
這一次要講 組合、原型式、寄生式、寄生組合式繼承方式。
1. 組合繼承:又叫偽經(jīng)典繼承,是指將原型鏈和借用構(gòu)造函數(shù)技術(shù)組合在一塊的一種繼承方式。
下面來看一個(gè)例子:
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.sayAge = function() { alert(this.age); } var instance1 = new SubType("Nicholas", 29); instance1.colors.push("black"); alert(instance1.colors); //red,blue,green,black instance1.sayName(); //Nicholas instance1.sayAge(); //29 var instance2 = new SubType("Greg", 27); alert(instance2.colors); //red,blue,green instance2.sayName(); //Greg instance2.sayAge(); //27
組合繼承避免了原型鏈和借用構(gòu)造函數(shù)的缺陷,融合它們的優(yōu)點(diǎn)。
2. 原型式繼承
可以在不必預(yù)先定義構(gòu)造函數(shù)的情況下實(shí)現(xiàn)繼承,其本質(zhì)是執(zhí)行對給定對象的淺復(fù)制。而復(fù)制得到的副本還可以得到進(jìn)一步的改造。
function object(o) { function F(){}; F.prototype = o; return new F; } var person = { name: "Nicholas", friends: ["Shelby", "Court", "Van"] }; var antherPerson = object(person); antherPerson.name = "Greg"; antherPerson.friends.push("Rob"); var antherPerson = object(person); antherPerson.name = "Linda"; antherPerson.friends.push("Barbie"); alert(person.friends); //Shelby,Court,Van,Rob,Barbie
3. 寄生式繼承
與原型式繼承非常相似,也是基于某個(gè)對象或某些信息創(chuàng)建一個(gè)對象,然后增強(qiáng)對象,最后返回對象。為了解決組合繼承模式由于多次調(diào)用超類型構(gòu)造函數(shù)而導(dǎo)致的低效率問題,可以將這個(gè)模式與組合繼承一起使用。
function object(o) { function F(){}; F.prototype = o; return new F; } function createAnother(original) { var clone = object(original); clone.sayHi = function() { alert("Hi"); }; return clone; } var person = { name: "Nicholas", friends: ["Shelby", "Court", "Van"] }; var anotherPerson = createAnother(person); anotherPerson.sayHi();
4. 寄生組合式繼承
集寄生式繼承和組合繼承的優(yōu)點(diǎn)與一身,是實(shí)現(xiàn)基本類型繼承的最有效方式。
//繼承原型 function extend(subType, superType) { function F(){}; F.prototype = superType.prototype; var prototype = new F; prototype.constructor = subType; subType.prototype = prototype; } //超類方法 function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function() { return this.name; } //子類方法 function SubType(name, age) { SuperType.call(this, name); this.age = age; } //繼承超類的原型 extend(SubType, SuperType); //子類方法 SubType.prototype.sayAge = function() { return this.age; } var instance1 = new SubType("Shelby"); var instance2 = new SubType("Court", 28); instance1.colors.push('black'); alert(instance1.colors); //red,blue,green,black alert(instance2.colors); //red,blue,green alert(instance1 instanceof SubType); //true alert(instance1 instanceof SuperType); //true
這段例子的高效率體現(xiàn)在它只調(diào)用了一次SuperType構(gòu)造函數(shù),并且因此避免了在SubType.prototype上面創(chuàng)建不必要的多余的屬性。與此同時(shí),原型鏈還能保持不變。因此,還能正常使用instanceof 和 isPrototypeOf()。開發(fā)人員普遍認(rèn)為寄生組合式繼承是引用類型最理想的繼承范式。
以上這篇JS 面向?qū)ο笾^承---多種組合繼承詳解就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
script標(biāo)簽屬性用type還是language
本文介紹了javascript腳本中標(biāo)簽屬性type與language的區(qū)別分析,有需要的小伙伴可以參考下2015-01-01JavaScript基礎(chǔ)知識之?dāng)?shù)據(jù)類型
JavaScript中有5種簡單數(shù)據(jù)類型(也稱為基本數(shù)據(jù)類型):Undefined、Null、Boolean、Number和String。還有1種復(fù)雜數(shù)據(jù)類型——Object,Object本質(zhì)上是由一組無序的名值對組成的2012-08-08簡略說明Javascript中的= =(等于)與= = =(全等于)區(qū)別
本篇文章簡略說明了Javascript中的= =(等于)與= = =(全等于)區(qū)別,有需要的朋友可以參考一下2013-04-04javascript cookie基礎(chǔ)應(yīng)用之記錄用戶名的方法
這篇文章主要介紹了javascript cookie基礎(chǔ)應(yīng)用之記錄用戶名的方法,涉及javascript基于cookie針對數(shù)據(jù)存儲的簡單應(yīng)用,需要的朋友可以參考下2016-09-09JavaScript高級程序設(shè)計(jì)(第3版)學(xué)習(xí)筆記4 js運(yùn)算符和操作符
如果說數(shù)據(jù)類型是編程語言的磚瓦,那么運(yùn)算符和操作符則是編程語言的石灰和水泥了,它是將各種數(shù)據(jù)類型的值有機(jī)組合的糅合劑,使得數(shù)據(jù)值不再只是一個(gè)孤立的值,而有了一種動態(tài)的靈性2012-10-10用JavaScript腳本實(shí)現(xiàn)Web頁面信息交互
這篇文章主要給大家介紹了關(guān)于用JavaScript腳本實(shí)現(xiàn)Web頁面信息交互的相關(guān)資料,需要的朋友可以參考下2006-12-12