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. msp430在ccsv5下出现的问题总结

    一.内存问题 问题描写叙述,报错: program will not fit into available memory.  placement with alignment fails for se ...

  2. android 图片特效处理之光晕效果

    这篇将讲到图片特效处理的图片光晕效果.跟前面一样是对像素点进行处理,本篇实现的思路可参见android图像处理系列之九--图片特效处理之二-模糊效果和android图像处理系列之十三--图片特效处理之 ...

  3. 考满分软件测试工程师（实习）面试&软达启航面试

    考满分软件测试工程师(实习)面试 从这学期秋季开学的时候开始准备找工作,一边学习看书,一边完善简历海投:九月下旬的时候在年级实习群里看到考满分发的宣传海报马上就加了hr的微信,hr要了我的简历,并给技 ...

  4. tomcat+nginx+redis实现均衡负载以及session共享

    1.redis简介及下载安装 作为这次的主角,相信大家对redis应该都一定印象,redis是一款开源的高性能key-value数据库,拥有丰富的键值储存类型,并提供多种语言的API. 与一般数据库不 ...

  5. 针对CDP协议攻击分析及安全防护

    针对CDP协议攻击分析及安全防护 熟悉Cisco的朋友都知道CDP协议是思科公司独特的发现协议,在思科公司出产的所有路由器和交换机里面都能运行此协议,一台运行C D P的路由器或交换机能够得知与它直接 ...

  6. javafx Cursor

    public class EffectTest extends Application { ObservableList cursors = FXCollections.observableArray ...

  7. Kinect 开发 —— 骨骼数据与彩色影像和深度影像的对齐

    在显示彩色影像和深度影像时最好使用WriteableBitmap对象: 要想将骨骼数据影像和深度影像,或者彩色影像叠加到一起,首先要确定深度影像的分辨率和大小,为了方便,这里将深度影像数据和彩色影像数 ...

  8. Extjs, 使用GridPanel出现 Layout run failed

    当GridPanel被加入到容器,且容器的layout为vbox时候, 会出现 Layout run failed 后者GridPanel的尺寸没有撑满父容器 网上找到的解决的方法是.要给父容器设置一 ...

  9. 用 runcloud.io 免费部署、优化管理你的多个VPS( 目前支持 Ubuntu 16.04 )

    使用RunCloud.io轻松实现Web部署 使用VPS.云服务器,通常会安装基本的操作系统,之后必须自己安装Apache,MySQL,PHP,尤其是服务器的性能优化,这对大多数人来说可能是非常具有挑 ...

  10. 项目列表dl、dt、dd使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...