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 ...
随机推荐
- 用css画三角形
当我们给某个图片做一个弹出层的时候,假设要让我们的弹出层显示一个小箭头,能够用css来画 用div来演示 div{ border:12px solid; berder-color:transparen ...
- js--11对象的创建方式
<html> <head> <title>Object</title> </head> <body> <script ty ...
- .Net写的比较清晰的接口
尼玛,隔行如隔山. .Net真操蛋. /// <summary> /// 加入群 /// </summary> /// <returns></returns& ...
- Nabou应用实例
本文接上文 <完整性检查工具Nabou> http://chenguang.blog.51cto.com/350944/280712650) this.width=650;" ...
- cf1089d Distance Sum
题目大意 给一个有n个点,m条边的无向连通图,求所有点两两之间的最短路.$(2<=n<=10^5;n-1<=m<=n+42)$ solution 我们注意到$m-n+1$很小. ...
- matplotlib散点图笔记
定义: 由一组不连续的点完成的图形 散点图: 包含正相关性,负相关性和不相关性. 散点图生成函数: plt.scatter(x,y) 演示代码如下: import numpy as np import ...
- 思科模拟器之路由器-RIP-DNS解析server
思科三层交换机之下的局域网搭建,请看这. 接下来将解说怎样通过路由器的RIP协议来连接多个局域网. 并设置DNSserver. 1.路由器RIP配置 RIP协议有个非常致命的缺点:就是它是依据路径长短 ...
- *android抓包工具——fiddler抓包分析api接口
本文地址:http://blog.csdn.net/u011733020 首先,写这个仅仅是为了学习.不是要做什么违法的事情,假设有问题,有关部门 请联系我,立刻删除. 不要查我水表. 正题:这里介绍 ...
- R语言-上海二手房数据分析
案例:通过分析上海的二手房的数据,分析出性价比(地段,价格,未来的升值空间)来判断哪个区位的二手房性价比最高 1.载入包 library(ggplot2) library(Hmisc) library ...
- Day2下午解题报告
预计分数:100+100+30=230 实际分数:100+100+30=230人品爆发&&智商爆发&&手感爆发 T3数据好水,,要是把数组开大一点的话还能多得10分,, ...