js的继承操作案例

一、总结

1、要案例要求，内心中想出操作要点

二、js的继承操作案例

案例

练习1：具有默认值的构造函数

实例描述：
有时候在创建对象时候，我们希望某些属性具有默认值
案例思路：
在构造函数中判断参数值是否为undefined，如果是就为其制定一个默认值。

练习2：遍历对象属性和方法

实例描述：
通过for...in...语句遍历对象中的数据，包括属性和方法
案例思路：
for...in语句和if判断分别遍历对象的属性和方法。

练习3：属性的添加和删除

实例描述：使用 delete 删除对象的属性(注：也可以删除方法，操作方法相同)

练习4：将一个对象赋值给另一个对象的属性

实例描述：对象的属性可以是任何类型的值，包括另一个对象。

练习5：创建两个继承关系的对象

实例描述：先创建一个人对象，然后再创建一个学生对象，让学生对象去继承人对象的属性和方法，同时学生对象又有自己的属性和方法。

代码

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="utf-8">

     <title>课堂演示</title>

 </head>

 <body>

  <script type="text/javascript">

  /*

   function Hero(name,type,home,weapon){

       this.name=name;

      this.type=type;

     this.home=home;

     this.weapon=weapon?weapon:'剑' ;

     this.skill=function(){

           alert(this.name+'向敌人发动了普通攻击')

     }

  }

  var user=new Hero('阿吉','战士','新手村')

  delete user.name;

  delete user.skill; //删除属性或方法

  user.sex='男' //添加属性



  document.write('user包含如下属性和方法：<hr/>')

  for (var i in user) {

   if (typeof(user[i])=='function') { //判断是否为函数用来输出属性和方法

      document.write('方法-'+i+':'+user[i]+'<br/>')

  }else{

         document.write('属性-'+i+':'+user[i]+'<br/>')

   }

  }

  function Hero(name,type,home,weapon){

     this.name=name;

   this.type=type;

     this.home=home;

     this.weapon=weapon?weapon:'剑' ;

     this.skill=function(){

           alert(this.name+'向敌人发动了普通攻击')

     }

  }

  function Sword(){

     this.Att=100;

     this.Level=1;

  }

  var xsj=new Sword();

  var user=new Hero('阿吉','战士','新手村',xsj)//将一个对象赋值给另一个对象的属性

  alert(user.weapon.Att)

  alert(user.weapon.Level)

   */

  function People(){

     this.type='人'

  }

  People.prototype.getType=function(){

         alert('这是一个人')

  }

  function Student(name,sex){

   People.call(this);

   this.name=name;

   this.sex=sex;

  }

  Student.prototype=new People()//学生继承人类

  Student.prototype.say=function(){

         alert('我是一名学生！')

  }

  var xiaoming=new Student('小明','男')

  alert(xiaoming.type)

  alert(xiaoming.name)

  xiaoming.getType()

  xiaoming.say()

  </script>

 </body>

 </html>