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>

三种继承方式:

<%@ 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>
时间: 2024-08-01 22:47:30

javascript继承,原型继承,借用构造函数继承,混合继承的相关文章

JavaScript构造函数+原型创建对象,原型链+借用构造函数模式继承父类练习

虽然经常说是做前端开发的,但常常使用的技术反而是JQuery比较多一点.在JavaScript的使用上相对而言少些.尤其是在创建对象使用原型链继承上面,在项目开发中很少用到.所以今天做个demo练习一下,以后忘记了也可以照搬一下. 说明一下: 1. Demo中使用的是构造函数+原型模式创建的对象.构造函数中存储对象实例使用的属性,原型模式增加实例使用的方法. 2. Demo中的继承分为两个方面.一个是属性继承,使用的是借用构造函数模式 call()方法.另一个是方法继承,这个就是使用原型方式继承

js中继承的实现,原型链的知识点归纳,借用构造函数,组合继承(伪经典继承)

博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/10/31/js%e4%b8%ad%e7%bb%a7%e6%89%bf%e7%9a%84%e5%ae%9e%e7%8e%b0%ef%bc%8c%e5%8e%9f%e5%9e%8b%e9%93%be%e7%9a%84%e7%9f%a5%e8%af%86%e7%82%b9%e5%bd%92%e7%ba%b3%ef%bc%8c%e5%80%9f%e7%94%a8%e6%9e%84%e9%80%a

js继承之一(借用构造函数)

现在,已经知道了原型对象,原型链的实现,原型链式继承的缺陷;那么如何避免这个缺陷? 在子类中借用父类的构造函数 //定义一个CarModel类 function CarModel(c){ this.color=c||"白色"; this.arr=[1,2,3]; this.getColor=function(){ console.log('我的颜色是'+this.color); } } //car类有自己的属性,比如品牌 function Car(brand){ CarModel.ca

282 继承模式:原型链继承 : 得到方法,借用构造函数 : 得到属性,组合,new一个对象背后做了些什么

1.原型链继承 : 得到方法 function Parent(){} Parent.prototype.test = function(){}; function Child(){} Child.prototype = new Parent(); // 子类型的原型指向父类型实例 Child.prototype.constructor = Child var child = new Child(); //有test() <!DOCTYPE html> <html lang="e

JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承

说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象JS基础讲解,工厂模式.构造函数模式.原型模式.混合模式.动态原型模式>,接下来讲一般通过那些方法完成JavaScript的继承. 原型链 JavaScript中实现继承最简单的方式就是使用原型链,将子类型的原型指向父类型的实例即可,即“子类型.prototype = new 父类型();”,实现方法如下

Javascript 组合继承 原型链继承 寄生继承

Javascript继承通常有三种方式. 第一种:组合式继承: function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function() { console.log(this.name); }; function SubType(name, age) { //通过ca

构造函数与各种继承方法特点

---使用new运算符调用一个函数时,总是返回一个对象 1.当使用new调用任何函数时,它会发生如下事情: 2.后台自动创建一个“空”对象,通过this引用该对象:var this={};//伪代码 3.可任意给this添加属性 4.在函数的末尾隐式返回this 但也可以通过下面的步骤返回不同的不同对象: function Dog(){                      var oDog=new Dog(); var noThis={noname:"Any"};       o

Java私有构造函数不能阻止继承

下面是一个调用已经私有化的单列的函数的列子. 这里用了静态内部类,关键就是静态内部类可以访问外部类的私有构造函数. 这种算是变种继承吧.前提是可以在原来的单列类里添加代码. class Single { private Single(){                System.out.println("Single");        }                public void runSingleMethod()        {                Sy

JS高级---借用构造函数

借用构造函数 为了数据共享, 改变原型指向, 做到了继承---通过改变原型指向实现的继承 缺陷: 因为改变原型指向的同时实现继承, 直接初始化了属性,继承过来的属性的值都是一样的了, 所以,这就是问题 只能重新调用对象的属性进行重新赋值 解决方案: 继承的时候, 不用改变原型的指向, 直接调用父级的构造函数的方式来为属性赋值就可以了------ 借用构造函数: 把要继承的父级的构造函数拿过来, 使用一下就可以了 缺陷: 借用构造函数:构造函数名字.call(当前对象,属性,属性,属性....);