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. KETTLE使用javascript步骤过滤特殊字符

    KETTLE使用javascript步骤过滤特殊字符 使用kettle在抽取大量excel数据时.总是遇到excel中有一些特殊字符,导致ExecuteSQL script步骤运行失败,本文记录一些方 ...

  2. hadoop2.x HDFS快照介绍

    说明:由于近期正好在研究hadoop的快照机制.看官网上的文档讲的非常仔细.就顺手翻译了.也没有去深究一些名词的标准译法,所以可能有些翻译和使用方法不是非常正确,莫要介意~~ 原文地址:(Apache ...

  3. Android_L(64bit) 模拟器配置及创建项目

    Android L可能就是Android 5.0.随之而来的还有Android Watch. Android TV. 而据说在10月中旬也就是15号Google的公布会上应该会推出Nexus 6和Ne ...

  4. javascript 将时间戳格式化

    <script>function getLocalTime(nS) { return new Date(parseInt(nS) * 1000).toLocaleString().repl ...

  5. Android图像处理之冰冻效果

    原图                                                                          效果图 代码: package com.colo ...

  6. ThinkPHP5如何修改默认跳转成功和失败页面

    ThinkPHP5如何修改默认跳转成功和失败页面 一.总结 一句话总结:直接修改默认跳转页面对应的模板文件的路径:'dispatch_success_tmpl' => APP_PATH . 'i ...

  7. a标签中的javascript:;是什么

    a标签中的javascript:;是什么 一.问题 <a>标签中href="javascript:;"表示什么意思?? <a id="jsPswEdit ...

  8. [ Java ] [ Eclipse ] 加速 Eclipse 載入速度-轉載

    加速 Eclipse 載入速度-轉載 https://read01.com/NJjNOB.html

  9. qrcode length overflow 生成二维码网址长度溢出解决办法

    QRCode.js is javascript library for making QRCode. QRCode.js supports Cross-browser with HTML5 Canva ...

  10. dhclient---获取动态IP

    dhclient命令使用动态主机配置协议动态的配置网络接口的网络参数. 语法 dhclient(选项)(参数) 选项 0:指定dhcp客户端监听的端口号: -d:总是以前台方式运行程序: -q:安静模 ...