首页 > 代码库 > javascript继承，原型继承，借用构造函数继承，混合继承
javascript继承，原型继承，借用构造函数继承，混合继承
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="http://www.mamicode.com/">
<title>My JSP ‘test3.jsp‘ starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">
-->
<script src="http://www.mamicode.com/js/jquery-2.1.1.min.js"></script>
<script type="application/javascript">
//js中实现继承，采用原型链的概念
//1.构造函数.prototype=原型对象
//2.原型对象.constructor=构造函数(模板)
//3.原型对象.isPropertyOf(实例对象)判断实例对象的原型是不是当前对象
//4.构造函数，实例对象(类和实例)
//父类构造函数 sup
function Sup(name){
this.name=name;
}
Sup.prototype={
constructor:Sup,
sayName:function(){
alert(this.name);
}
}
//子类构造函数 Sub
function Sub(age){
this.age=age;
}
//如果让子类的原型对象，结果会怎么样？(实行js继承)
//此时的原型对象包含一个指向另一个原型的指针
//相应的；另一个原型中也包含着一个指向另一个构造函数的指针
//子类的原型对象的构造器变成了父类的构造器
// Sub.prototype=new Sup();
// alert(Sub.prototype.constructor); //父类构造器
Sub.prototype=new Sup(‘张三‘);
var sub1=new Sub();
alert(sub1.name); //张三
sub1.sayName();
</script>
</head>
<body>
This is my JSP page. <br>
</body>
</html>三种继承方式：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="http://www.mamicode.com/">
<title>My JSP ‘test3.jsp‘ starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">
-->
<script src="http://www.mamicode.com/js/jquery-2.1.1.min.js"></script>
<script type="application/javascript">
//三种继承方式
//原型继承
/*
function Person(name,age){
this.name=name;
this.age=age;
}
//父类原型对象属性
Person.prototype.id=10;
function Boy(sex){
this.sex=sex;
}
Boy.prototype=new Person(‘张三‘,21);
var b=new Boy();
alert(b.id); //10
//原型继承的特点：既继承了父类的模板，又继承了父类的原型对象
*/
//类继承：只继承模板，不继承原型对象(借用构造函数的方式继承)
/*
function Person(name,age){
this.name=name;
this.age=age;
}
//父类原型对象属性
Person.prototype.id=10;
function Boy(name,age,sex){
Person.call(this,name,age); //绑定对象
this.sex=sex;
}
var b=new Boy(‘张三‘,23,‘男‘);
alert(b.age);
alert(b.name);
alert(b.sex);
alert(b.age); //undefined 父类原型对象并没有继承
*/
//原型继承+借用构造函数继承=混合继承
function Person(name,age){
this.name=name;
this.age=age;
}
//父类原型对象属性
Person.prototype.id=10;
Person.prototype.sayName=function(){alert(this.name);}
function Boy(name,age,sex){
Person.call(this,name,age); //1.借用构造函数继承
this.sex=sex;
}
//只剩下父类的实例和弗雷德原型对象的关系了
Boy.prototype=new Person(); //2.原型继承，继承父类的原型对象
var boy=new Boy(‘张三‘,21,‘男‘);
alert(boy.id);
boy.sayName();
</script>
</head>
<body>
This is my JSP page. <br>
</body>
</html>本文出自 “matengbing” 博客，请务必保留此出处http://matengbing.blog.51cto.com/11395502/1879585
javascript继承，原型继承，借用构造函数继承，混合继承
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。