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