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>


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3