您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了JavaScript如何使用prototype屬性實現(xiàn)繼承,內(nèi)容簡而易懂,希望大家可以學(xué)習(xí)一下,學(xué)習(xí)完之后肯定會有收獲的,下面讓小編帶大家一起來看看吧。
JS并沒有顯式的繼承語法,在JS中所有的對象都是Object的子類實現(xiàn), 因而對象之間是平等關(guān)系.
盡管如此我們可以通過特殊的方法達(dá)到繼承的效果.
當(dāng)然JS也不能直接定義類, 我們通過定義函數(shù)可以得到一個同名的類 , 同時這個函數(shù)就是這個類的構(gòu)造器,
在定義函數(shù)時以this
修飾的變量就是定義的 類的實例中的屬性,當(dāng)這個屬性時函數(shù)時, 就可以認(rèn)為這個屬性變成了一個實例方法
//定義一個Person類 function Person(name , age) { this.name=name; this.age=age; //定義一個info函數(shù) this.info=function() { document.writeln("年齡"+this.age+"姓名"+this.name); } } //創(chuàng)建Person類的實例對象 var p1= new Person('xiaoming',20); //調(diào)用p1的info方法 p1.info(); var p2= new Person('wang',22); p2.info();
這種在類內(nèi)(函數(shù)內(nèi))定義函數(shù)的方式是有弊端的:
為了避免這兩種情況, 通常不建議在類定義時為類定義方法,而是采用prototype屬性:
JS中所有類(函數(shù))都有一個prototype屬性, 為該屬性增加屬性方法可以視為對類的拓展,
也就是增加了prototype屬性的類繼承了原有的類 , 這也就是JS所提供的偽繼承機制
//定義一個Person類 function Person(name , age) { this.name=name; this.age=age; //定義一個info函數(shù) this.info=function() { document.writeln("年齡"+this.age+"姓名"+this.name); } } //創(chuàng)建Person類的實例對象 var p1= new Person('xiaoming',20); //調(diào)用p1的info方法 p1.info(); //為Person類增加walk方法 Person.prototype.walk=function() { document.writeln(this.name+'正在走<br/>'); } var p2=new Person('xiaohong',20); //p2可以調(diào)用Person中的方法 p2.info(); //也可以調(diào)用prototype屬性增加的方法 p2.walk(); //JS允許為類動態(tài)增加方法和屬性,這里p1也可以調(diào)用walk p1.walk();
上例為prototype屬性增加了方法可以認(rèn)為是為Person類動態(tài)地增加了方法,
這種方式增加的方法會讓所有實例共享一個walk方法, 可以注意到是Person.prototype
類的屬性,并非實例
walk方法不在Person函數(shù)內(nèi),因此不會產(chǎn)生閉包,
這種為類動態(tài)地增加屬性和方法可以被當(dāng)作一種偽繼承,
但這種偽繼承并非產(chǎn)生 了新的子類而是修改了原有的類
別著急,prototype屬性還有另一種方式實現(xiàn)繼承:
prototype屬性代表該類原型對象, 即默認(rèn)是一個Object對象, 將類prototype設(shè)為父類實例可以實現(xiàn)繼承
function Person(name,age) { this.name=name; this.age=age; } Person.prototype.say=function() { console.log(this.name+'說話了'); } var per = new Person('小明',20); per.say(); //再定義一個student類,欲意繼承Person function Student (grade) { this.grade=grade; } //將student的prototype設(shè)為Person對象 Student.prototype =new Person('小紅',22); //為Student添加方法 Student.prototype.intro= function() { console.log(this.name+'是'+this.grade+'年級學(xué)生'); } var stu=new Student(3); stu.name="小剛"; console.log(stu instanceof Person&& stu instanceof Student);//true stu.say();//小剛說話了 stu.intro();//小剛是3年級學(xué)生
上例定義了Person類,增加了say()方法
又定義了Student類, 并將Student類的prototype屬性設(shè)為Person對象, 表明Student原型是Person對象,
也就是Student繼承了Person, 會得到其方法和屬性
以上就是關(guān)于JavaScript如何使用prototype屬性實現(xiàn)繼承的內(nèi)容,如果你們有學(xué)習(xí)到知識或者技能,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。