<%@ 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="<%=basePath%>">
    
    <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="styles.css">
	-->
	<script src="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="<%=basePath%>">
    
    <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="styles.css">
	-->
	<script src="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>