寄生組合式繼承
成都創(chuàng)新互聯(lián)企業(yè)建站,十多年網(wǎng)站建設(shè)經(jīng)驗(yàn),專注于網(wǎng)站建設(shè)技術(shù),精于網(wǎng)頁(yè)設(shè)計(jì),有多年建站和網(wǎng)站代運(yùn)營(yíng)經(jīng)驗(yàn),設(shè)計(jì)師為客戶打造網(wǎng)絡(luò)企業(yè)風(fēng)格,提供周到的建站售前咨詢和貼心的售后服務(wù)。對(duì)于網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站中不同領(lǐng)域進(jìn)行深入了解和探索,創(chuàng)新互聯(lián)在網(wǎng)站建設(shè)中充分了解客戶行業(yè)的需求,以靈動(dòng)的思維在網(wǎng)頁(yè)中充分展現(xiàn),通過(guò)對(duì)客戶行業(yè)精準(zhǔn)市場(chǎng)調(diào)研,為客戶提供的解決方案。
組合繼承是js最常用的繼承模式,組合繼承最大的問(wèn)題就是無(wú)論在什么情況下,都會(huì)調(diào)用兩次構(gòu)造函數(shù):一次是在創(chuàng)建子類型原型時(shí),另一次是在子類型構(gòu)造函數(shù)內(nèi)部。
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);//第二次調(diào)用SuperType()
this.age = age;
}
SubType.prototype = new SuperType();//第一次調(diào)用SuperType()
SubType.prototype.sayAge = function(){
alert(this.age);
}
一,js中對(duì)象繼承
js中有三種繼承方式
1.js原型(prototype)實(shí)現(xiàn)繼承
復(fù)制代碼 代碼如下:
SPAN style="BACKGROUND-COLOR: #ffffff"SPAN style="FONT-SIZE: 18px"html
body
script type="text/javascript"
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.sayHello=function(){
alert("使用原型得到Name:"+this.name);
}
var per=new Person("馬小倩",21);
per.sayHello(); //輸出:使用原型得到Name:馬小倩
function Student(){}
Student.prototype=new Person("洪如彤",21);
var stu=new Student();
Student.prototype.grade=5;
Student.prototype.intr=function(){
alert(this.grade);
}
stu.sayHello();//輸出:使用原型得到Name:洪如彤
stu.intr();//輸出:5
/script
/body
/html/SPAN/SPAN
2.構(gòu)造函數(shù)實(shí)現(xiàn)繼承
復(fù)制代碼 代碼如下:
SPAN style="FONT-SIZE: 18px"html
body
script type="text/javascript"
function Parent(name){
this.name=name;
this.sayParent=function(){
alert("Parent:"+this.name);
}
}
function Child(name,age){
this.tempMethod=Parent;
this.tempMethod(name);
this.age=age;
this.sayChild=function(){
alert("Child:"+this.name+"age:"+this.age);
}
}
var parent=new Parent("江劍臣");
parent.sayParent(); //輸出:“Parent:江劍臣”
var child=new Child("李鳴",24); //輸出:“Child:李鳴 age:24”
child.sayChild();
/script
/body
/html/SPAN
3.call , apply實(shí)現(xiàn)繼承
復(fù)制代碼 代碼如下:
SPAN style="FONT-SIZE: 18px"html
body
script type="text/javascript"
function Person(name,age,love){
this.name=name;
this.age=age;
this.love=love;
this.say=function say(){
alert("姓名:"+name);
}
}
//call方式
function student(name,age){
Person.call(this,name,age);
}
//apply方式
function teacher(name,love){
Person.apply(this,[name,love]);
//Person.apply(this,arguments); //跟上句一樣的效果,arguments
}
//call與aplly的異同:
//1,第一個(gè)參數(shù)this都一樣,指當(dāng)前對(duì)象
//2,第二個(gè)參數(shù)不一樣:call的是一個(gè)個(gè)的參數(shù)列表;apply的是一個(gè)數(shù)組(arguments也可以)
var per=new Person("武鳳樓",25,"魏熒屏"); //輸出:“武鳳樓”
per.say();
var stu=new student("曹玉",18);//輸出:“曹玉”
stu.say();
var tea=new teacher("秦杰",16);//輸出:“秦杰”
tea.say();
/script
/body
/html/SPAN
二、call和apply的用法(詳細(xì)介紹)
js中call和apply都可以實(shí)現(xiàn)繼承,唯一的一點(diǎn)參數(shù)不同,func.call(func1,var1,var2,var3)對(duì)應(yīng)的apply寫法為:func.apply(func1,[var1,var2,var3])。
JS手冊(cè)中對(duì)call的解釋:
復(fù)制代碼 代碼如下:
SPAN style="FONT-SIZE: 18px"call 方法
調(diào)用一個(gè)對(duì)象的一個(gè)方法,以另一個(gè)對(duì)象替換當(dāng)前對(duì)象。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
參數(shù)
thisObj
可選項(xiàng)。將被用作當(dāng)前對(duì)象的對(duì)象。
arg1, arg2, , argN
可選項(xiàng)。將被傳遞方法參數(shù)序列。
說(shuō)明
call 方法可以用來(lái)代替另一個(gè)對(duì)象調(diào)用一個(gè)方法。call 方法可將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對(duì)象。
如果沒(méi)有提供 thisObj 參數(shù),那么 Global 對(duì)象被用作 thisObj。/SPAN
說(shuō)簡(jiǎn)單一點(diǎn),這兩函數(shù)的作用其實(shí)就是更改對(duì)象的內(nèi)部指針,即改變對(duì)象的this指向的內(nèi)容。這在面向?qū)ο蟮膉s編程過(guò)程中有時(shí)是很有用的。下面以apply為例,說(shuō)說(shuō)這兩個(gè)函數(shù)在 js中的重要作用。如:
復(fù)制代碼 代碼如下:
SPAN style="FONT-SIZE: 18px" function Person(name,age){ //定義一個(gè)類
this.name=name; //名字
this.age=age; //年齡
this.sayhello=function(){alert(this.name)};
}
function Print(){ //顯示類的屬性
this.funcName="Print";
this.show=function(){
var msg=[];
for(var key in this){
if(typeof(this[key])!="function"){
msg.push([key,":",this[key]].join(""));
}
}
alert(msg.join(" "));
};
}
function Student(name,age,grade,school){ //學(xué)生類
Person.apply(this,arguments);//比call優(yōu)越的地方
Print.apply(this,arguments);
this.grade=grade; //年級(jí)
this.school=school; //學(xué)校
}
var p1=new Person("卜開(kāi)化",80);
p1.sayhello();
var s1=new Student("白云飛",40,9,"岳麓書院");
s1.show();
s1.sayhello();
alert(s1.funcName);/SPAN
另外,F(xiàn)unction.apply()在提升程序性能方面有著突出的作用:
我們先從Math.max()函數(shù)說(shuō)起,Math.max后面可以接任意個(gè)參數(shù),最后返回所有參數(shù)中的最大值。
比如
復(fù)制代碼 代碼如下:
SPAN style="FONT-SIZE: 18px"alert(Math.max(5,8)); //8
alert(Math.max(5,7,9,3,1,6)); //9
//但是在很多情況下,我們需要找出數(shù)組中最大的元素。
var arr=[5,7,9,1];
//alert(Math.max(arr)); // 這樣卻是不行的。NaN
//要這樣寫
function getMax(arr){
var arrLen=arr.length;
for(var i=0,ret=arr[0];iarrLen;i++){
ret=Math.max(ret,arr[i]);
}
return ret;
}
alert(getMax(arr)); //9
//換用apply,可以這樣寫
function getMax2(arr){
return Math.max.apply(null,arr);
}
alert(getMax2(arr)); //9
//兩段代碼達(dá)到了同樣的目的,但是getMax2卻優(yōu)雅,高效,簡(jiǎn)潔得多。
//再比如數(shù)組的push方法。
var arr1=[1,3,4];
var arr2=[3,4,5];
//如果我們要把 arr2展開(kāi),然后一個(gè)一個(gè)追加到arr1中去,最后讓arr1=[1,3,4,3,4,5]
//arr1.push(arr2)顯然是不行的。 因?yàn)檫@樣做會(huì)得到[1,3,4,[3,4,5]]
//我們只能用一個(gè)循環(huán)去一個(gè)一個(gè)的push(當(dāng)然也可以用arr1.concat(arr2),但是concat方法并不改變arr1本身)
var arrLen=arr2.length;
for(var i=0;iarrLen;i++){
arr1.push(arr2[i]);
}
//自從有了Apply,事情就變得如此簡(jiǎn)單
Array.prototype.push.apply(arr1,arr2); //現(xiàn)在arr1就是想要的結(jié)果/SPAN
構(gòu)造函數(shù)=function(){};
原型對(duì)象={屬性甲:1,屬性乙:2};
構(gòu)造函數(shù).prototype=原型對(duì)象;
新建對(duì)象=new 構(gòu)造函數(shù)();
新建對(duì)象.屬性甲=0;
這樣新建對(duì)象就繼承了原型對(duì)象,并在自身內(nèi)覆蓋了一層私有屬性,但并不改變?cè)蛯?duì)象的任何屬性。
此時(shí)新建對(duì)象本身相當(dāng)于{屬性甲:0}(算上隱藏的不可枚舉屬性是{屬性甲:0,constructor:構(gòu)造函數(shù)}),但是如果訪問(wèn)新建對(duì)象.屬性乙這個(gè)自身不存在的屬性,則會(huì)上溯到其原型對(duì)象的同名屬性。
原型對(duì)象的屬性改變會(huì)對(duì)所有包括之前創(chuàng)建的新建對(duì)象統(tǒng)一有效。方便管理且節(jié)省空間。
原型對(duì)象亦可層層繼承(原型對(duì)象本身也可以是基于更上層原型的對(duì)象構(gòu)造的)。而沒(méi)有繼承任何對(duì)象的最頂層對(duì)象(也即是={}這種最常見(jiàn)的定義形式,等同于=new Object())的constructor就是Object這個(gè)原生超級(jí)根對(duì)象構(gòu)造器。
這幾個(gè)連接不錯(cuò),給你分享一下:
第二個(gè):。
原理很簡(jiǎn)單:總結(jié)就是利用對(duì)象冒充機(jī)制的call方法把父類的屬性給抓取下來(lái),而成員方法盡量寫進(jìn)被所有對(duì)象實(shí)例共享的prototype域中,以防止方法副本重復(fù)創(chuàng)建。然后子類繼承父類prototype域來(lái)抓取下來(lái)所有的方法。如想徹底理清這些調(diào)用鏈的關(guān)系,推薦大家多關(guān)注Js中prototype的constructor和對(duì)象的constructor屬性,
js繼承的概念
js里常用的如下兩種繼承方式:
原型鏈繼承(對(duì)象間的繼承)
類式繼承(a href=";tn=44039180_cprfenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YYn10zuADLujP9nAczPyFb0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHnLPH03nHDd"target="_blank" class="baidu-highlight"構(gòu)造函數(shù)/a間的繼承)
由于js不像java那樣是真正a href=";tn=44039180_cprfenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YYn10zuADLujP9nAczPyFb0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHnLPH03nHDd" target="_blank" class="baidu-highlight"面向?qū)ο?a的語(yǔ)言,js是基于對(duì)象的,它沒(méi)有類的概念。所以,要想實(shí)現(xiàn)繼承,可以用js的原型prototype機(jī)制或者用apply和call方法去實(shí)現(xiàn)
在a href=";tn=44039180_cprfenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YYn10zuADLujP9nAczPyFb0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHnLPH03nHDd" target="_blank" class="baidu-highlight"面向?qū)ο?a的語(yǔ)言中,我們使用類來(lái)創(chuàng)建一個(gè)自定義對(duì)象。然而js中所有事物都是對(duì)象,那么用什么辦法來(lái)創(chuàng)建自定義對(duì)象呢?這就需要用到j(luò)s的原型:
我們可以簡(jiǎn)單的把prototype看做是一個(gè)模版,新創(chuàng)建的自定義對(duì)象都是這個(gè)模版(prototype)的一個(gè)拷貝 (實(shí)際上不是拷貝而是鏈接,只不過(guò)這種鏈接是不可見(jiàn),新實(shí)例化的對(duì)象內(nèi)部有一個(gè)看不見(jiàn)的__Proto__指針,指向原型對(duì)象)。
js可以通過(guò)a href=";tn=44039180_cprfenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YYn10zuADLujP9nAczPyFb0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHnLPH03nHDd"target="_blank" class="baidu-highlight"構(gòu)造函數(shù)/a和原型的方式模擬實(shí)現(xiàn)類的功能。 另外,js類式繼承的實(shí)現(xiàn)也是依靠原型鏈來(lái)實(shí)現(xiàn)的。
原型式繼承與類式繼承
類式繼承是在子類型a href=";tn=44039180_cprfenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YYn10zuADLujP9nAczPyFb0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHnLPH03nHDd" target="_blank" class="baidu-highlight"構(gòu)造函數(shù)/a的內(nèi)部調(diào)用超類型的構(gòu)造函數(shù)。
嚴(yán)格的類式繼承并不是很常見(jiàn),一般都是組合著用:
function Super(){
this.colors=["red","blue"];
}
function Sub(){
Super.call(this);
}
原型式繼承是借助已有的對(duì)象創(chuàng)建新的對(duì)象,將子類的原型指向父類,就相當(dāng)于加入了父類這條原型鏈
原型鏈繼承
為了讓子類繼承父類的屬性(也包括方法),首先需要定義一個(gè)構(gòu)造函數(shù)。然后,將父類的新實(shí)例賦值給構(gòu)造函數(shù)的原型。代碼如下:
script
function Parent(){
this.name = 'mike';
}
function Child(){
this.age = 12;
}
Child.prototype = new Parent();//Child繼承Parent,通過(guò)原型,形成鏈條
var test = new Child();
alert(test.age);
alert(test.name);//得到被繼承的屬性
//繼續(xù)原型鏈繼承
function Brother(){ //brother構(gòu)造
this.weight = 60;
}
Brother.prototype = new Child();//繼續(xù)原型鏈繼承
var brother = new Brother();
alert(brother.name);//繼承了Parent和Child,彈出mike
alert(brother.age);//彈出12
/script
以上原型鏈繼承還缺少一環(huán),那就是Object,所有的構(gòu)造函數(shù)都繼承自O(shè)bject。而繼承Object是自動(dòng)完成的,并不需要我們自己手動(dòng)繼承,那么他們的a href=";tn=44039180_cprfenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YYn10zuADLujP9nAczPyFb0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHnLPH03nHDd" target="_blank" class="baidu-highlight"從屬關(guān)系/a是怎樣的呢?
確定原型和實(shí)例的關(guān)系
可以通過(guò)兩種方式來(lái)確定原型和實(shí)例之間的關(guān)系。操作符instanceof和isPrototypeof()方法:
alert(brother instanceof Object)//true
alert(test instanceof Brother);//false,test 是brother的超類
alert(brother instanceof Child);//true
alert(brother instanceof Parent);//true
只要是原型鏈中出現(xiàn)過(guò)的原型,都可以說(shuō)是該原型鏈派生的實(shí)例的原型,因此,isPrototypeof()方法也會(huì)返回true
在js中,被繼承的函數(shù)稱為超類型(父類,基類也行),繼承的函數(shù)稱為子類型(子類,派生類)。使用原型繼承主要由兩個(gè)問(wèn)題:
一是字面量重寫原型會(huì)中斷關(guān)系,使用引用類型的原型,并且子類型還無(wú)法給超類型傳遞參數(shù)。
偽類解決引用共享和超類型無(wú)法傳參的問(wèn)題,我們可以采用“借用構(gòu)造函數(shù)”技術(shù)
借用構(gòu)造函數(shù)(類式繼承)
script
function Parent(age){
this.name = ['mike','jack','smith'];
this.age = age;
}
function Child(age){
Parent.call(this,age);
}
var test = new Child(21);
alert(test.age);//21
alert(test.name);//mike,jack,smith
test.name.push('bill');
alert(test.name);//mike,jack,smith,bill
/script
借用構(gòu)造函數(shù)雖然解決了剛才兩種問(wèn)題,但沒(méi)有原型,則復(fù)用無(wú)從談起,所以我們需要原型鏈+借用構(gòu)造函數(shù)的模式,這種模式稱為組合繼承
組合繼承
script
function Parent(age){
this.name = ['mike','jack','smith'];
this.age = age;
}
Parent.prototype.run = function () {
return this.name + ' are both' + this.age;
};
function Child(age){
Parent.call(this,age);//對(duì)象冒充,給超類型傳參
}
Child.prototype = new Parent();//原型鏈繼承
var test = new Child(21);//寫new Parent(21)也行
alert(test.run());//mike,jack,smith are both21
/script
組合式繼承是比較常用的一種繼承方法,其背后的思路是 使用原型鏈實(shí)現(xiàn)對(duì)原型屬性和方法的繼承,而通過(guò)借用構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。這樣,既通過(guò)在原型上定義方法實(shí)現(xiàn)了函數(shù)復(fù)用,又保證每個(gè)實(shí)例都有它自己的屬性。
call()的用法:調(diào)用一個(gè)對(duì)象的一個(gè)方法,以另一個(gè)對(duì)象替換當(dāng)前對(duì)象。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
原型式繼承
這種繼承借助原型并基于已有的對(duì)象創(chuàng)建新對(duì)象,同時(shí)還不用創(chuàng)建自定義類型的方式稱為原型式繼承
script
function obj(o){
function F(){}
F.prototype = o;
return new F();
}
var box = {
name : 'trigkit4',
arr : ['brother','sister','baba']
};
var b1 = obj(box);
alert(b1.name);//trigkit4
b1.name = 'mike';
alert(b1.name);//mike
alert(b1.arr);//brother,sister,baba
b1.arr.push('parents');
alert(b1.arr);//brother,sister,baba,parents
var b2 = obj(box);
alert(b2.name);//trigkit4
alert(b2.arr);//brother,sister,baba,parents
/script
原型式繼承首先在obj()函數(shù)內(nèi)部創(chuàng)建一個(gè)臨時(shí)性的構(gòu)造函數(shù) ,然后將傳入的對(duì)象作為這個(gè)構(gòu)造函數(shù)的原型,最后返回這個(gè)臨時(shí)類型的一個(gè)新實(shí)例。
寄生式繼承
這種繼承方式是把原型式+a href=";tn=44039180_cprfenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YYn10zuADLujP9nAczPyFb0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHnLPH03nHDd" target="_blank" class="baidu-highlight"工廠模式/a結(jié)合起來(lái),目的是為了封裝創(chuàng)建的過(guò)程。
script
function create(o){
var f= obj(o);
f.run = function () {
return this.arr;//同樣,會(huì)共享引用
};
return f;
}
/script
組合式繼承的小問(wèn)題
組合式繼承是js最常用的繼承模式,但組合繼承的超類型在使用過(guò)程中會(huì)被調(diào)用兩次;一次是創(chuàng)建子類型的時(shí)候,另一次是在子類型構(gòu)造函數(shù)的內(nèi)部
script
function Parent(name){
this.name = name;
this.arr = ['哥哥','妹妹','父母'];
}
Parent.prototype.run = function () {
return this.name;
};
function Child(name,age){
Parent.call(this,age);//第二次調(diào)用
this.age = age;
}
Child.prototype = new Parent();//第一次調(diào)用
/script
以上代碼是之前的組合繼承,那么寄生組合繼承,解決了兩次調(diào)用的問(wèn)題。
寄生組合式繼承
script
function obj(o){
function F(){}
F.prototype = o;
return new F();
}
function create(parent,test){
var f = obj(parent.prototype);//創(chuàng)建對(duì)象
f.constructor = test;//增強(qiáng)對(duì)象
}
function Parent(name){
this.name = name;
this.arr = ['brother','sister','parents'];
}
Parent.prototype.run = function () {
return this.name;
};
function Child(name,age){
Parent.call(this,name);
this.age =age;
}
inheritPrototype(Parent,Child);//通過(guò)這里實(shí)現(xiàn)繼承
var test = new Child('trigkit4',21);
test.arr.push('nephew');
alert(test.arr);//
alert(test.run());//只共享了方法
var test2 = new Child('jack',22);
alert(test2.arr);//引用問(wèn)題解決
/script
call和apply
全局函數(shù)apply和call可以用來(lái)改變函數(shù)中this的指向,如下:
// 定義一個(gè)全局函數(shù)
function foo() {
console.log(this.fruit);
}
// 定義一個(gè)全局變量
var fruit = "apple";
// 自定義一個(gè)對(duì)象
var pack = {
fruit: "orange"
};
// 等價(jià)于window.foo();
foo.apply(window); // "apple",此時(shí)this等于window
// 此時(shí)foo中的this === pack
foo.apply(pack); // "orange"
分享文章:javascript的繼承,JavaScript的繼承
文章分享:http://jinyejixie.com/article30/dsdgjso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、小程序開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)公司、移動(dòng)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、網(wǎng)站策劃
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
移動(dòng)網(wǎng)站建設(shè)知識(shí)