js的三種繼承方式詳解
更新時(shí)間：2017年01月21日 08:22:19 作者：hahaxiaotianxia
本文主要介紹了js的三種繼承方式。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
1.js原型（prototype）實(shí)現(xiàn)繼承
代碼如下
<body>
<script type="text/javascript">
function Parent(name,age){
this.name=name;
this.age=age;
this.sayHi=function(){
alert("Hi, my name is "+this.name+", my age is "+this.age);
}
}
//Child繼承Parent
function Child(grade){
this.grade=grade;
this.sayGrade=function(){
alert("My grade is "+this.grade);
}
}
Child.prototype=new Parent("小明","10");///////////
var chi=new Child("5");
chi.sayHi();
chi.sayGrade();
</script>
</body>
2.構(gòu)造函數(shù)實(shí)現(xiàn)繼承
代碼如下:
<body>
<script type="text/javascript">
function Parent(name,age){
this.name=name;
this.age=age;
this.sayHi=function(){
alert("Hi, my name is "+this.name+", my age is "+this.age);
}
}
//Child繼承Parent
function Child(name,age,grade){
this.grade=grade;
this.sayHi=Parent;///////////
this.sayHi(name,age);
this.sayGrade=function(){
alert("My grade is "+this.grade);
}
}
var chi=new Child("小明","10","5");
chi.sayHi();
chi.sayGrade();
</script>
</body>
3.call , apply實(shí)現(xiàn)繼承 -----很方便！
代碼如下:
<body>
<script type="text/javascript">
function Parent(name,age){
this.name=name;
this.age=age;
this.sayHi=function(){
alert("Hi, my name is "+this.name+", my age is "+this.age);
}
}
function Child(name,age,grade){
this.grade=grade;
// Parent.call(this,name,age);///////////
// Parent.apply(this,[name,age]);/////////// 都可
Parent.apply(this,arguments);///////////
this.sayGrade=function(){
alert("My grade is "+this.grade);
}
// this.sayHi=function(){
// alert("Hi, my name is "+this.name+", my age is "+this.age+",My grade is "+this.grade);
// }
}
var chi=new Child("小明","10","5");
chi.sayHi();
chi.sayGrade();
</script>
</body>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了JS使用JSON作為參數(shù),結(jié)合實(shí)例形式分析了ajax傳遞json數(shù)據(jù)及數(shù)據(jù)處理的相關(guān)技巧,需要的朋友可以參考下2016-06-06
event.X和event.clientX的區(qū)別分析
解釋一下event.X和event.clientX有什么區(qū)別？event.clientX返回事件發(fā)生時(shí),mouse相對(duì)于客戶(hù)窗口的X坐標(biāo) event.X也一樣但是如果設(shè)置事件對(duì)象的定位屬性值為relative2011-10-10
最近一直在學(xué)Javascript，打算寫(xiě)一些文章，算做自己的學(xué)習(xí)心得吧，也可以算是學(xué)習(xí)筆記。沒(méi)有系統(tǒng)的知識(shí)點(diǎn)，太基礎(chǔ)的不想寫(xiě)，主要是寫(xiě)一些自己覺(jué)得有價(jià)值的地方2014-05-05
兼容Event對(duì)象等 拖拽類(lèi)代碼2008-12-12
JS實(shí)現(xiàn)不用中間變量temp 實(shí)現(xiàn)兩個(gè)變量值得交換方法
這篇文章主要介紹了在JS中 實(shí)現(xiàn)不用中間變量temp 實(shí)現(xiàn)兩個(gè)變量值得交換 ,需要的朋友可以參考下2018-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序日歷和日期選擇插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
前端如何用post的方式進(jìn)行eventSource請(qǐng)求
這篇文章主要給大家介紹了關(guān)于前端如何用post的方式進(jìn)行eventSource請(qǐng)求的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-04-04
JS實(shí)現(xiàn)的打字機(jī)效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的打字機(jī)效果,結(jié)合完整實(shí)例形式分析了javascript定時(shí)觸發(fā)自定義函數(shù)模擬打字輸出效果的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-06-06
本篇文章主要介紹了詳解webpack性能優(yōu)化——DLL，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
Postman無(wú)法正常返回結(jié)果問(wèn)題解決
這篇文章主要介紹了Postman無(wú)法正常返回結(jié)果問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08