本文實(shí)例講述了JavaScript使用prototype屬性實(shí)現(xiàn)繼承操作。分享給大家供大家參考，具體如下：

JS并沒(méi)有顯式的繼承語(yǔ)法,在JS中所有的對(duì)象都是Object的子類實(shí)現(xiàn), 因而對(duì)象之間是平等關(guān)系.

盡管如此我們可以通過(guò)特殊的方法達(dá)到繼承的效果.

當(dāng)然JS也不能直接定義類, 我們通過(guò)定義函數(shù)可以得到一個(gè)同名的類 , 同時(shí)這個(gè)函數(shù)就是這個(gè)類的構(gòu)造器,

在定義函數(shù)時(shí)以this修飾的變量就是定義的 類的實(shí)例中的屬性,當(dāng)這個(gè)屬性時(shí)函數(shù)時(shí), 就可以認(rèn)為這個(gè)屬性變成了一個(gè)實(shí)例方法

//定義一個(gè)Person類function Person(name , age){ this.name=name; this.age=age; //定義一個(gè)info函數(shù) this.info=function() { document.writeln('年齡'+this.age+'姓名'+this.name); }}//創(chuàng)建Person類的實(shí)例對(duì)象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ù)的方式是有弊端的:

性能低下, 這種方式定義函數(shù)在每次創(chuàng)建對(duì)象時(shí)都會(huì)創(chuàng)建一個(gè)新的info函數(shù), 有多個(gè)對(duì)象就會(huì)有多個(gè)info函數(shù),實(shí)際上我們只需要一個(gè)info函數(shù), 這樣就會(huì)造成系統(tǒng)內(nèi)存泄漏, 引起性能的下降 使info函數(shù)中的局部變量產(chǎn)生閉包, 閉包會(huì)擴(kuò)大局部變量的作用域,使局部變量存活到函數(shù)外

為了避免這兩種情況, 通常不建議在類定義時(shí)為類定義方法,而是采用prototype屬性:

JS中所有類(函數(shù))都有一個(gè)prototype屬性, 為該屬性增加屬性方法可以視為對(duì)類的拓展,

也就是增加了prototype屬性的類繼承了原有的類 , 這也就是JS所提供的偽繼承機(jī)制

//定義一個(gè)Person類function Person(name , age){ this.name=name; this.age=age; //定義一個(gè)info函數(shù) this.info=function() { document.writeln('年齡'+this.age+'姓名'+this.name); }}//創(chuàng)建Person類的實(shí)例對(duì)象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允許為類動(dòng)態(tài)增加方法和屬性,這里p1也可以調(diào)用walkp1.walk();

上例為prototype屬性增加了方法可以認(rèn)為是為Person類動(dòng)態(tài)地增加了方法,

這種方式增加的方法會(huì)讓所有實(shí)例共享一個(gè)walk方法, 可以注意到是Person.prototype類的屬性,并非實(shí)例

walk方法不在Person函數(shù)內(nèi),因此不會(huì)產(chǎn)生閉包,

這種為類動(dòng)態(tài)地增加屬性和方法可以被當(dāng)作一種偽繼承,

但這種偽繼承并非產(chǎn)生 了新的子類而是修改了原有的類

別著急,prototype屬性還有另一種方式實(shí)現(xiàn)繼承:

prototype屬性代表該類原型對(duì)象, 即默認(rèn)是一個(gè)Object對(duì)象, 將類prototype設(shè)為父類實(shí)例可以實(shí)現(xiàn)繼承

function Person(name,age){ this.name=name; this.age=age;}Person.prototype.say=function(){ console.log(this.name+’說(shuō)話了’);}var per = new Person(’小明’,20);per.say();//再定義一個(gè)student類,欲意繼承Personfunction Student (grade){ this.grade=grade;}//將student的prototype設(shè)為Person對(duì)象Student.prototype =new Person(’小紅’,22);//為Student添加方法Student.prototype.intro= function(){ console.log(this.name+’是’+this.grade+’年級(jí)學(xué)生’);}var stu=new Student(3);stu.name='小剛';console.log(stu instanceof Person&& stu instanceof Student);//truestu.say();//小剛說(shuō)話了stu.intro();//小剛是3年級(jí)學(xué)生

上例定義了Person類,增加了say()方法

又定義了Student類, 并將Student類的prototype屬性設(shè)為Person對(duì)象, 表明Student原型是Person對(duì)象,

也就是Student繼承了Person, 會(huì)得到其方法和屬性

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。