TuLing520的专栏

我爱你!

javascript面向对象继承的三种方法

<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">    <title>Untitled Page</title>    <script language="javascript" type="text/javascript">    //基类    

function Person()    {        this.Name="Person";        this.Sex="NONE";        this.Age="?";        this.SayName=function(){alert(this.Name);};        this.SaySex=function(){alert(this.Sex);};        this.SayAge=function(){alert(this.Age);};    }    //子类    function ManPerson()    {           this.Name="ManPerson";        this.Sex="Man";        this.Age="20"        Person.apply(this);//执行该语句时会调用Person中的构造器,先前赋值的ManPerson,Man,20就失去作用了,所以这句话        //要放在this.Name="ManPerson";之前才能即继承Person的方法,又不会覆盖我们的赋值操作。    }        

//第一种方法    function first(){    var p=new Person();    alert("Name:"+p.Name+"  Sex:"+p.Sex+"  Age:"+p.Age);//执行结果为Name:Person  Sex:NONE  Age:?    p.SayName();//执行结果Person    var mp=new ManPerson();    alert("Name:"+mp.Name+"  Sex:"+mp.Sex+"  Age:"+mp.Age);//apply在赋值后结果为:Name:Person  Sex:NONE  Age:?    //在赋值前结果为:Name:ManPerson  Sex:Man  Age:20    mp.SaySex();//执行结果Man    //可以看到ManPerson很好的继承了Person    }        

//第二种方法    function second(){    for(pro in Person)    {        ManPerson[pro]=Person[pro];    }    var p=new Person();    alert("Name:"+p.Name+"  Sex:"+p.Sex+"  Age:"+p.Age);//执行结果为Name:Person  Sex:NONE  Age:?    p.SayName();//执行结果Person    var mp=new ManPerson();    alert("Name:"+mp.Name+"  Sex:"+mp.Sex+"  Age:"+mp.Age);//执行结果为Name:Person  Sex:NONE  Age:?    mp.SaySex();//执行结果NONE    mp.Name="ManPerson";    mp.SayName();//执行结果:ManPerson    //可以看到ManPerson继承了Person的SayName    }    

function third(){    //第三种方法    ManPerson.prototype=Person.prototype;    var mmp=new ManPerson();    mmp.SayName();//执行结果:Person    mmp.Name="ManPerson";    mmp.SayName();//执行结果:ManPerson    //ManPerson继承了Person的方法    }    </script></head><body>    <form id="form1" runat="server">    <div>    <button value="FirstMethod" onclick="first()">FirstMethod</button><br />    <button validationgroup="SecondMethod" onclick="second()">SecondMethod    </button><br />    <button value="ThirdMethod" onclick="third()">ThirdMethod</button>    </div>    </form></body></html>

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭