javascript对象的继承

最新推荐文章于 2025-09-18 05:30:00 发布

原创最新推荐文章于 2025-09-18 05:30:00 发布 · 104 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #prototype #编程 #HTML #ViewUI

HTML/JS/CSS 专栏收录该内容

13 篇文章

订阅专栏

本文介绍JavaScript中通过apply、复制及prototype三种方式实现对象继承的方法，并提供了详细的代码示例。

该篇文章的代码采摘自http://www.cnblogs.com/jingtao/archive/2008/04/29/1175668.html

自己只经过了微小的改动

代码主要说明了三种继承javascript对象的方法：apply，复制，prototype

<html>
<head>
    <title>JavaScript面向对象编程</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中的构造器，先前赋值的ManPerson，Man，20就失去作用了，所以这句话
        //要放在this.Name="ManPerson";之前才能即继承Person的方法，又不会覆盖我们的赋值操作。
        Person.apply(this);
    }
    
    //第一种方法
    function first(){
	    var p = new Person();
	    //执行结果为Name：Person  Sex：NONE  Age：？
	    alert("Name:"+p.Name+"  Sex:"+p.Sex+"  Age:"+p.Age);
	    //执行结果Person
	    p.SayName();
	    var mp=new ManPerson();
	    //apply在赋值后结果为：Name：Person  Sex：NONE  Age：？
	    //在赋值前结果为：Name：ManPerson  Sex：Man  Age：20
	    alert("Name:"+mp.Name+"  Sex:"+mp.Sex+"  Age:"+mp.Age);
	    //执行结果Man
	    //可以看到ManPerson很好的继承了Person
	    mp.SaySex();
    }
    
    //第二种方法
    function second(){
	    for(pro in Person)
	    {
	        ManPerson[pro]=Person[pro];
	    }
	    var p=new Person();
	    //执行结果为Name：Person  Sex：NONE  Age：？
	    alert("Name:"+p.Name+"  Sex:"+p.Sex+"  Age:"+p.Age);
	    //执行结果Person
	    p.SayName();
	    var mp=new ManPerson();
	    //执行结果为Name：Person  Sex：NONE  Age：？
	    alert("Name:"+mp.Name+"  Sex:"+mp.Sex+"  Age:"+mp.Age);
	    //执行结果NONE
	    mp.SaySex();
	    mp.Name="ManPerson";
	    //执行结果：ManPerson
	    //可以看到ManPerson继承了Person的SayName
	    mp.SayName();
	    
    }

    //第三种方法
    function third(){
	    //第三种方法
	    ManPerson.prototype=Person.prototype;
	    var mmp=new ManPerson();
	    //执行结果：Person
	    mmp.SayName();
	    mmp.Name="ManPerson";
	    //执行结果：ManPerson、
	    //ManPerson继承了Person的方法
	    mmp.SayName();
    }
    </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>