zoukankan      html  css  js  c++  java
  • js的继承操作案例

    js的继承操作案例

    一、总结

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

    二、js的继承操作案例

    案例

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

    • 实例描述:

      有时候在创建对象时候,我们希望某些属性具有默认值

    • 案例思路:

      在构造函数中判断参数值是否为undefined,如果是就为其制定一个默认值。

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

    • 实例描述:

      通过for...in...语句遍历对象中的数据,包括属性和方法

    • 案例思路:

      for...in语句和if判断分别遍历对象的属性和方法。

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

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

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

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

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

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

    代码

     1 <!DOCTYPE html>
     2 <html lang="zh-cn">
     3 <head>
     4     <meta charset="utf-8">
     5     <title>课堂演示</title>
     6 </head>
     7 <body>
     8  <script type="text/javascript">
     9  /*
    10   function Hero(name,type,home,weapon){
    11       this.name=name;
    12      this.type=type;
    13     this.home=home;
    14     this.weapon=weapon?weapon:'剑' ;
    15     this.skill=function(){
    16           alert(this.name+'向敌人发动了普通攻击')
    17     }  
    18  }
    19 
    20  var user=new Hero('阿吉','战士','新手村')
    21  delete user.name;
    22  delete user.skill; //删除属性或方法
    23  user.sex='男' //添加属性
    24 
    25  document.write('user包含如下属性和方法:<hr/>')
    26  for (var i in user) {
    27   if (typeof(user[i])=='function') { //判断是否为函数用来输出属性和方法
    28      document.write('方法-'+i+':'+user[i]+'<br/>')
    29  }else{
    30         document.write('属性-'+i+':'+user[i]+'<br/>')
    31   }
    32  }
    33 
    34 
    35  function Hero(name,type,home,weapon){
    36     this.name=name;
    37   this.type=type;
    38     this.home=home;
    39     this.weapon=weapon?weapon:'剑' ;
    40     this.skill=function(){
    41           alert(this.name+'向敌人发动了普通攻击')
    42     }  
    43  }
    44 
    45  function Sword(){
    46     this.Att=100;
    47     this.Level=1;
    48  }
    49  
    50  var xsj=new Sword();
    51  var user=new Hero('阿吉','战士','新手村',xsj)//将一个对象赋值给另一个对象的属性
    52  alert(user.weapon.Att)
    53  alert(user.weapon.Level)
    54   */
    55 
    56  function People(){
    57     this.type='人'
    58  }
    59  People.prototype.getType=function(){
    60         alert('这是一个人')
    61  }
    62 
    63  function Student(name,sex){
    64   People.call(this);
    65   this.name=name;
    66   this.sex=sex;
    67  }
    68 
    69  Student.prototype=new People()//学生继承人类
    70  Student.prototype.say=function(){
    71         alert('我是一名学生!')
    72  }
    73 
    74  var xiaoming=new Student('小明','男')
    75  alert(xiaoming.type)
    76  alert(xiaoming.name)
    77  xiaoming.getType()
    78  xiaoming.say()
    79  
    80  </script>
    81 </body>
    82 </html>
  • 相关阅读:
    浏览器的reflow和repaint
    javascript正则表达式中参数g的作用
    InkCanvas 自由虚线笔画
    WPF 圆轮菜单的实现
    WPF实现化学式上下标
    install and use zookeeper C client API
    install and use boost::thread
    explicit instantiations in template class/function
    The science of programming
    how does vector work?
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9017430.html
Copyright © 2011-2022 走看看