js的继承操作案例
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的继承操作案例的更多相关文章
- js实现动态操作table
本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType=&quo ...
- js数组的操作及数组与字符串的相互转化
数组与字符串的相互转化 <script type="text/javascript">var obj="new1abcdefg".replace(/ ...
- [转]Node.JS使用Sequelize操作MySQL
Sequelize官方文档 https://sequelize.readthedocs.io/en/latest/ 本文转自:https://www.jianshu.com/p/797e10fe23 ...
- AngularJS基于MVC的复杂操作案例
AngularJS基于MVC的复杂操作案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- js 数组的操作
js数组的操作 用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多,自以为js高手的自己居然无从下手,一 ...
- js数组的操作 Full
js数组的操作 用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多,自以为js高手的自己居然无从下手,一 ...
- js的dom操作(整理)(转)
js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...
- js的DOM操作整理(整理)
js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...
- js原生继承几种方式
js原生继承 js本身并没有继承和类的概念,本质上是通过原型链(prototype)的形式实现的. 1.先写两个构造函数Parent和Child,用于将Child继承Parent function P ...
随机推荐
- dlmalloc 2.8.6 源代码具体解释(5)
本文章由vector03原创, 转载请注明出处. 邮箱地址: mmzsmm@163.com, 欢迎来信讨论. 3. 分配及实现 本章节介绍dlmalloc的分配算法和实现.由于存在多mspac ...
- view-activity跟控件在onkey事件上的传递关系
android 中Activity跟View对于键盘的监听,主要有以下几个方法 //按键按下 public boolean onKeyDown(int keyCode, KeyEvent event) ...
- 120.VS调试技巧
设置断点调试 在一行代码的左侧点击即可设置断点,按F5(调试->开始调试)即可运行到第一个端点处暂停 逐语句调试 按F11(调试->逐语句)即可开始一步一步执行 逐过程调试 按F10(调试 ...
- 项目: 基于Python socket模块实现的简单 ftp 项目:
需要 自己创建一个 info 文件 用来存储用户信息 服务器: import socket import pickle import struct import os import time ''.s ...
- POJ 1904 思路题
思路: 思路题 题目诡异地给了一组可行匹配 肯定有用啊-. 就把那组可行的解 女向男连一条有向边 如果男喜欢女 男向女连一条有向边 跑一边Tarjan就行了 (这个时候 环里的都能选 "增广 ...
- Block Manager
在Spark中,将数据抽象为Block(不论是shuffle数据,还是节点本身存储的数据),而每个driver/executor中的block都是由`BlockManager`这个类来负责管理的.对于 ...
- postgresql 不同数据库不同模式下的数据迁移
编写不容易,转载请注明出处谢谢, 数据迁移 因为之前爬虫的时候,一部分数据并没有上传到服务器,在本地.本来用的就是postgresql,也没用多久,数据迁移的时候,也遇到了很多问题,第一次使pg_du ...
- HDU 1043 八数码(A*搜索)
在学习八数码A*搜索问题的时候须要知道下面几个点: Hash:利用康托展开进行hash 康托展开主要就是依据一个序列求这个序列是第几大的序列. A*搜索:这里的启示函数就用两点之间的曼哈顿距离进行计算 ...
- PHP中字符串比较的常用方法
PHP中字符串比较的常用方法 一.总结 1.其实应该是直接等于号就可以了的 2.也可用strcmp,注意返回值 二.PHP中字符串比较的常用方法 1.按字节比较 按字节比较字符串是最常用的方法.其中可 ...
- 用jersey写 java restfull web services 输出xml格式数据
1 logic package com.toic.rest; import com.toic.model.Folder; import java.util.logging.Logger; import ...