JavaScript面向对象------继承

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

<title>Untitled Page</title>

//基类

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>

<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>

Tag标签: javascript,继承

posted @ 2008-04-29 09:48 镜涛阅读(1702) 评论(16) 编辑收藏所属分类: AJAX

镜涛的家 JT

A NEW LIFE WITH YOU !

JavaScript面向对象------继承

公告

与我联系

留言簿

我参加的小组

我参与的团队

随笔分类(48)

相册

我的好友

最新随笔

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜