javascript繼承，原型繼承，借用構造函數繼承，混合繼承

時間 2021-01-02

標籤 javascript css html java jquery app jsp ide 函數欄目 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="<%=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>

三種繼承方式：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="<%=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>