文档章节

javascript继承实现

指尖残雪
 指尖残雪
发布于 2016/05/22 23:56
字数 377
阅读 1
收藏 0

使用javascript写自己的继承方法,主要用到javascript原型和构造方法方面的知识。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
		<title>使用javascript实现继承</title>
		<script type="text/javascript" charset="GBK">
			//sub是子类,sup是父类
			function extend(sub,sup){
				// 目的: 实现只继承父类的原型对象
				var F = new Function();// 1 创建一个空函数    目的:空函数进行中转
				F.prototype = sup.prototype;// 2 实现空函数的原型对象和超类的原型对象转换
				sub.prototype = new F(); // 3 原型继承 
				sub.prototype.constructor = sub;//4还原子类的构造器
				//保存一下父类的原型对象: 一方面方便解耦  另一方面方便获得父类的原型对象
				sub.superClass = sup.prototype;//自定义一个子类的静态属性 接受父类的原型对象
				//判断父类的原型对象的构造器 (加保险)
				if(sup.prototype.constructor == Object.prototype.constructor ){
					sup.prototype.constructor = sup;
				}
			}
			//应用举例
			//父类
			function Person(name , age){
				this.name = name;
				this.age = age;
			};
			Person.prototype = {
				constructor:Person,
				sayHello:function(){
					alert("Hello world");
				}
			};			
			//子类
			function Boy(name,age,sex){
				//call 绑定父类的模版函数 实现 借用构造函数继承 只复制了父类的模版
				Boy.superClass.constructor.call(this,name,age);
				this.sex = sex;
			};
			//原型继承的方式: 即继承了父类的模版 又继承了父类的原型对象
			//Boy.prototype = new Person();
			// 只继承一遍父类的原型对象
			extend(Boy , Person);
			
			Boy.prototype.sayHello = function(){
				alert('hi javascript!');
			}
			var b = new Boy('张三' , 20 , '男');
			alert(b.name); 
			alert(b.sex);
			b.sayHello();
			Boy.superClass.sayHello.call(b);//父类的方法
				
		</script>
	</head>
	<body>
	</body>
</html>


本文转载自:http://blog.csdn.net/bq1073100909/article/details/49592683

共有 人打赏支持
指尖残雪
粉丝 7
博文 73
码字总数 0
作品 0
上海
后端工程师
私信 提问
JavaScript 中的继承:ES3、ES5 和 ES6

选择一种继承方式 JavaScript 是一门动态语言,动态意味着高灵活性,而这尤其可以体现在继承上面。JavaScript 中的继承有很多种实现方式,可以分成下面四类: Mixin 模式,即属性混入,从一个...

天方夜
07/04
0
0
从Android到React Native开发(二、通信与模块实现)

大家吼,(◐‿◑)作为失踪人口回归,这次第二期,就让我们来怼React Native的通信,快速实现单独的React Native模块到APP里,愉悦吧骚年。至于为什么要有这期?当然是为了愉悦的飙车啦ε-...

carguo
08/22
0
0
JavaScript 原型精髓,读完这篇就够了

一篇文章让你搞清楚 JavaScript 继承的本质、、、 都是什么。 很多小伙伴表示不明白 JavaScript 的继承,说是原型链,看起来又像类,究竟是原型还是类?各种 、、 内部变量更是傻傻搞不清楚。...

linesh
今天
0
0
JavaScript和Lua的类继承

javascript 本身虽是一门面向对象的编程语言, 但并没有明确提供继承方式.二十多年间,众多高手提供很多模拟继承的实现, 主要的有:对象冒充,call/apply,prototype,以及深复制等. 网上有很多此类...

南苑听风
2014/10/31
0
3
Cocos2d-JS中JavaScript继承

JavaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求。由于Cocos2d-JS引擎是从Cocos2d-x演变而来的,在Cocos2d-J...

智捷课堂
2015/03/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

storm 环境搭建

1.下载解压 下载地址:http://storm.apache.org/downloads.html

MrPei
5分钟前
0
0
Python Base - 读写文件,字符串拼接,单引号

字符转义 读写文件cvs 字符串拼接,替换 import csvcsv_file_name = 'cardbin.csv'# insert into `card_bin_code` (name_of, code_of, card_no_prefix, bank_code) values ('中国银行......

园领T
7分钟前
0
0
基于JQUERY BOOTSTRAP 最简单的loading遮罩层

<%--loading遮罩层--%><div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">   <div style="width: 200px;height:20px; z-index: 20000; position: abs......

颖辉小居
7分钟前
0
0
springboot+kafka

1,首先springboot对kafka的支持也很好,同样是在配置文件中配置好参数,然后就可以直接使用。先说一下,很简单,,,不要怕 2,我用的依赖是 <dependency> <groupId>org.springframewor...

我真是小菜鸡
11分钟前
2
0
webservice动态客户端自我记录备份(spring boot)

动态客户端相比直接调用webservice的客户端代码要简单很多,但实际上很多工作是java自己替我们做掉了。简单记录一下内容,以备后续使用: pom文件只需要引入: <!-- CXF webservice --><de...

checkboxMan
17分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部