js繼承實現(xiàn)方法詳解
本文實例講述了js繼承實現(xiàn)方法。分享給大家供大家參考,具體如下:
var animal=function(name){ //構造函數(shù) this.name=name; this.sayhello=function(){ alert("hi我是"+this.name); }; } animal.prototype.shout=function(){ //prototype主要作用:給類增加一個新的屬性或函數(shù) alert(this.name+"正在叫!"); }; animal.prototype.game=function(){ alert(this.name+"正在玩耍!"); }; var dog=new animal("小黑"); //實例化 dog.sayhello(); dog.shout(); dog.game();
一、原型繼承
var animal=function(name){ this.name=name; this.sayhello=function(){ alert("hi我是"+this.name); }; } animal.prototype.shout=function(){ alert(this.name+"正在叫!"); }; animal.prototype.game=function(){ alert(this.name+"正在玩耍!"); }; var Dog=function(name){ this.name=name; this.shout=function(){ //重寫父類的函數(shù) alert(this.name+"汪汪叫!"); } } Dog.prototype=Cat.prototype=new animal(); var dog=new Dog("小黑"); dog.sayhello(); dog.shout(); dog.game(); var cat=new Cat("小白"); cat.sayhello(); cat.shout(); cat.game();
animal是父類(或超類),要繼承于誰,誰就是父類(超類)
改進:專門寫個函數(shù),用來實現(xiàn)繼承
var animal=function(name){ this.name=name; this.sayhello=function(){ alert("hi我是"+this.name); }; } Function.prototype.extends=function(superclass){ //extends是保留關鍵字,不能拿出來單獨使用,如var extends=function(){},而這里可以使用是因為他做為函數(shù)的屬性添加上去 this.prototype=new superclass(); }; animal.prototype.shout=function(){ alert(this.name+"正在叫!"); }; animal.prototype.game=function(){ alert(this.name+"正在玩耍!"); }; var Dog=function(name){ this.name=name; this.shout=function(){ alert(this.name+"汪汪叫!"); } } Dog.extends(animal); var dog=new Dog("小黑"); dog.sayhello(); dog.shout(); dog.game(); var dog=new Dog("小白"); dog.sayhello(); dog.shout(); dog.game();
二、call,apply繼承(不完全繼承)
var animal=function(name){ this.name=name; this.sayhello=function(){ alert("hi我是"+this.name); }; } animal.prototype.shout=function(){ alert(this.name+"正在叫!"); }; animal.prototype.game=function(){ alert(this.name+"正在玩耍!"); }; var Dog=function(name){ animal.call(this,name); } var dog=new Dog("小黑"); dog.sayhello(); dog.shout(); dog.game();
輸出:hi我是小黑
TypeError: dog.shout is not a function
通過call(apply)的方式,只能改變其this指向,通過prototype添加進去的方法,他是無法直接繼承的
總結:call,apply這種方式的繼承適用于沒有prototype的類或者不需要繼承prototype所添加屬性或函數(shù)的類,因為call和apply函數(shù)只是實現(xiàn)了方法的替換,而沒有對對象的屬性和函數(shù)進行復制操作
原型繼承,則可以繼承所有的屬性和函數(shù)
繼承的屬性,只有刪除原有屬性,才會輸出繼承的屬性
更多關于JavaScript相關內(nèi)容可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript中json操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調(diào)試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
詳解javascript立即執(zhí)行函數(shù)表達式IIFE
本文主要介紹了javascript立即執(zhí)行函數(shù)表達式IIFE的相關知識。具有很好的參考價值,下面跟著小編一起來看下吧2017-02-02js限制輸入框只能輸入數(shù)字(onkeyup觸發(fā))
這篇文章主要介紹了通過js實現(xiàn)input輸入框只能輸入數(shù)字的實現(xiàn)方法,主要是通過正則表達式替換實現(xiàn),需要的朋友可以參考下2018-09-09