zoukankan      html  css  js  c++  java
  • JavaScript面向对象继承

    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>

    原创文章,转载请注明出处!
    All CopyRight Reserved !

    主页:http://jingtao.cnblogs.com

    QQ:307073463
    Email:jingtaodeemail@qq.com
    MSN:sunjingtao@live.com

  • 相关阅读:
    Ext简单demo示例
    git命令行操作
    js继承方式
    一次活动总结
    h5自定义audio(问题及解决)
    JavaScript标准参考教材(alpha)--笔记
    css揭秘--笔记(未完)
    css权威指南--笔记
    h5上传图片及预览
    gulp入门小记
  • 原文地址:https://www.cnblogs.com/jingtao/p/1175668.html
Copyright © 2011-2022 走看看