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>

js的继承操作案例的更多相关文章

  1. js实现动态操作table

     本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType=&quo ...

  2. js数组的操作及数组与字符串的相互转化

    数组与字符串的相互转化 <script type="text/javascript">var obj="new1abcdefg".replace(/ ...

  3. [转]Node.JS使用Sequelize操作MySQL

    Sequelize官方文档  https://sequelize.readthedocs.io/en/latest/ 本文转自:https://www.jianshu.com/p/797e10fe23 ...

  4. AngularJS基于MVC的复杂操作案例

    AngularJS基于MVC的复杂操作案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  5. js 数组的操作

    js数组的操作 用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多,自以为js高手的自己居然无从下手,一 ...

  6. js数组的操作 Full

    js数组的操作 用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多,自以为js高手的自己居然无从下手,一 ...

  7. js的dom操作（整理）（转）

    js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...

  8. js的DOM操作整理（整理）

    js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...

  9. js原生继承几种方式

    js原生继承 js本身并没有继承和类的概念,本质上是通过原型链(prototype)的形式实现的. 1.先写两个构造函数Parent和Child,用于将Child继承Parent function P ...

随机推荐

  1. java8新增特性（一）---Lambda表达式

    Lambda表达式也成为闭包,是java语言层次上的改变,Lambda同意把函数作为一个方法的參数(函数作为參数传递进方法中),或者把代码看成数据.函数式程序猿对这一概念非常熟悉. 在JVM平台上有非 ...

  2. BZOJ 3671 NOI 2014 随机数生成器 贪心

    题目大意:实在是太难说明了,自己看pdf吧.. 思路:优先依照它说明的方法处理数组,然后为了让数列中尽可能多的出现小的数字,所以1是必需要出现的,这样才干使整个数列的排序后字典序最小. 我们思考,假设 ...

  3. Impala性能优化

    不多说,直接上干货! • 执行计划 – 查询sql执行之前,先对该sql做一个分析,列出需要完成这一项查询的详细方案 – 命令:explain sql.profile 要点: • 1.SQL优化,使用 ...

  4. 【Henu ACM Round #12 D】 Longest Subsequence

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 记录每个数字出现的次数cnt[x]; (大于1e6的直接忽略) 另外用一个数组z[1e6] 然后for枚举x 第二层for枚举x的倍 ...

  5. SpringJunit测试类 BaseTest（转）

    /** * * * @author Jerval * @date 2011-2-17 */ @RunWith(SpringJUnit4ClassRunner.class) @ContextConfig ...

  6. Property-属性动画

    今天第一次接触到属性动画.参考着 转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38067475 的博客,自己学习下. 它的区别跟 ...

  7. values-dimen 不同分辨率资源实现引用

    今天遇到了一种情况,就是在不同分辨率下面出现了需要设定不同的距离,当时第一反映就是重新定义一个layout.但是,仅仅为了更改一个数值就复制那么多的代码,明显不合里.后来就想到干脆在不同的分辨率下创建 ...

  8. Math的三个取整方法。

    Math类中提供了三个与取整有关的方法:ceil.floor.round,这些方法的作用与它们的英文名称的含义相对应 1.ceil的英文意义是天花板,该方法就表示向上取整,所以,Math.ceil(1 ...

  9. http 协议上传文件multipart form-data boundary 说明--转载

    原文地址:http://xixinfei.iteye.com/blog/2002017 含义 ENCTYPE="multipart/form-data" 说明: 通过 http 协 ...

  10. JavaFx EventHandler

    import javafx.application.Application; import javafx.event.ActionEvent; import javafx.event.EventHan ...