微信扫一扫打赏支持

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>

 

posted @ 2018-05-10 00:07  范仁义  阅读(640)  评论(0)  编辑  收藏  举报