`

js面向对象简单理解

阅读更多

利用prototype实现继承:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js面向对象</title>
<script type="text/javascript">
	//动物类
	function Animal(){
		this.name;
	}
	
	//呼吸方法
	Animal.prototype.respiratory = function(){
		alert(this.name+'正在呼吸');
	}
	//吃方法
	Animal.prototype.eat = function(){
		alert('动物在吃东西');
	}
	
	//鱼类
	function Fish(){}
	
	//继承动物
	Fish.prototype = new Animal;
	
	//重写动物吃的方法
	Fish.prototype.eat = function(){
		this.constructor.prototype['eat']();//调用父类方法eat
		alert(this.name+'正在吃东西');
	}
	
	
	var fish = new Fish();
	fish.name = 'forever';
	fish.respiratory();
	fish.eat();
	
	
</script>
</head>

<body>
</body>
</html>

 利用base.js实现继承:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js面向对象</title>
<script type="text/javascript" src="Base.js"></script>
<script type="text/javascript">
	//创建动物类
	var Animal = Base.extend({
		//构造方法
		constructor : function(){
			this.name;
		},
		//呼吸方法
		respiratory : function(){
			 alert(this.name+'正在呼吸');
		},
		eat : function(){
			alert('动物在吃东西');
		}
	});
	//创建鱼类继承动物类
	var Fish = Animal.extend({
		constructor : function(){
		},
		eat : function(){
			 this.base();//调用父类方法eat();
			 alert(this.name+'正在吃东西');
		}
	});	
	
   var fish = new Fish();   
   fish.name = 'forever';   
   fish.respiratory();   
   fish.eat();   

</script>
</head>

<body>
</body>
</html>

 利用Prototype.js实现继承:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js面向对象</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
	//动物类
	var Animal = Class.create({
		//初始化方法					  
		initialize:function(){
			this.name;
		},
		//呼吸方法
		respiratory : function(){
			 alert(this.name+'正在呼吸');   
		},
		eat : function(){
			alert('动物在吃东西');
		}
	});
	
	//鱼类,继承动物类
	var Fish = Class.create(Animal,{
		initialize:function(){
		},
		//重写动物吃的方法
		eat : function($super){
			$super();//调用父类eat方法
			alert(this.name+'正在吃东西');
		}
	});
	
	var fish = new Fish();   
    fish.name = 'forever';   
    fish.respiratory();   
    fish.eat(); 
	

</script>
</head>

<body>
</body>
</html>

 带命名空间的实现类继承:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js面向对象命名空间</title>
<script type="text/javascript" src="Base.js"></script>
<script type="text/javascript">
	var org = {};
	org.forever = {};
	org.forever.util = {};
	//创建动物类
	org.forever.util.Animal = Base.extend({
		//构造方法
		constructor : function(){
			this.name;
		},
		//呼吸方法
		respiratory : function(){
			 alert(this.name+'正在呼吸');
		},
		eat : function(){
			alert('动物在吃东西');
		}
	});
	//创建鱼类继承动物类
	org.forever.util.Fish = org.forever.util.Animal.extend({
		constructor : function(){
		},
		eat : function(){
			 this.base();//调用父类方法eat();
			 alert(this.name+'正在吃东西');
		}
	});	
	
   var fish = new org.forever.util.Fish();   
   fish.name = 'forever';   
   fish.respiratory();   
   fish.eat();   

</script>
</head>

<body>
</body>
</html>

 js接口方式:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js接口</title>
<script type="text/javascript" src="Base.js"></script>
<script type="text/javascript">
	//用户实体类
	function User(){
		this.userName;
		this.password;
	}
	//用户业务接口
	var IUserBiz = {
		addUser:null,
		delUser:null,
		updateUser:null,
		queryUser:null
	};
	
	//实现接口的方法,可以演变成多接口实现,只是一种模拟
	//这种写法也可以利用在多继承身上
	function implements(interfaceName,proxyMethds){
		var proxy = function(){};
		for(var methodName in interfaceName){
			proxy.prototype[methodName] = interfaceName[methodName];
		}
		for(var methodName in proxyMethds){
			proxy.prototype[methodName] = proxyMethds[methodName];
		}
		return proxy;
	}
	
	//实现了接口方法的类
	var UserBizImpl = implements(IUserBiz,{
			addUser:function(user){alert('用户名字:'+user.userName);}
	});
	
	var userBiz = new UserBizImpl();
	var user = new User();
	user.userName = 'forever';
	user.password = '123456';
	userBiz.addUser(user);
	userBiz.delUser(user);//抛出异常
</script>
</head>

<body>
</body>
</html>

 

 

分享到:
评论

相关推荐

    转载面向对象的理解

    ### 面向对象的理解 #### 一、面向过程与面向对象的概念对比 在软件开发领域,编程范式是组织代码的方式,常见的编程范式包括面向过程编程(Procedural Programming)和面向对象编程(Object-Oriented Programming...

    JavaScript面向对象实现简单工厂模式

    JavaScript面向对象实现简单工厂模式是一种常见的设计模式,它在软件工程中被广泛应用于创建对象的场景。简单工厂模式的核心思想是将对象的创建过程抽象出来,由一个专门的工厂类负责,使得客户端代码无需关心具体...

    js面向对象简单教程

    ### JavaScript面向对象编程详解 #### 一、引言与背景 JavaScript作为一种解释型、基于对象的脚本语言,自1995年诞生以来,经历了从简单的表单验证功能到现代Web开发核心技术之一的巨大转变。随着AJAX技术的兴起和...

    面向对象JavaScript开发

    JavaScript,作为一种广泛应用于Web开发的动态脚本语言,最初被设计为简单的客户端脚本语言,但随着技术的发展,它已经发展出了丰富的面向对象编程(OOP)特性。面向对象JavaScript开发是现代Web开发中不可或缺的一...

    JavaScript 面向对象编程详细讲解文档

    JavaScript的核心在于对象、原型和隐式继承,这些都是理解其面向对象特性的重要概念。 首先,让我们深入理解对象。在JavaScript中,一切皆为对象,包括函数。你可以直接通过对象字面量或者构造函数来创建对象。对象...

    js面向对象简单编程.pdf

    在本文档《js面向对象简单编程.pdf》中,主要介绍了JavaScript面向对象编程的基本概念和方法,涵盖创建对象、原型链、构造函数、类等面向对象编程的核心知识点。文档中虽然存在OCR扫描识别错误,但整体内容还是能够...

    javascript面向对象

    ### JavaScript面向对象编程详解 #### 引言 在软件工程领域,面向对象编程(OOP)是一种编程范式,它使用“对象”来设计软件。每个对象都可以包含数据(属性)和方法(行为)。JavaScript虽然起初并非为面向对象...

    第15章 javascript面向对象与原型

    在深入讲解JavaScript面向对象与原型的知识点之前,首先需要了解JavaScript的基础知识。在JavaScript中,面向对象编程(OOP)的概念虽然存在,但是它的实现与传统基于类的语言有所不同。ECMAScript,也就是...

    javascript面向对象编程pdf

    总结来说,JavaScript面向对象编程涵盖了从基本原理到实现细节的多个方面,包括但不限于对象、构造函数、原型链、继承以及封装等。本书系统地介绍了这些知识点,并通过实例演示了如何在现代JavaScript中实现OOP,...

    JavaScript 面向对象编程

    ### JavaScript面向对象编程详解 #### 一、JavaScript面向对象编程简介 JavaScript作为一种广泛使用的脚本语言,虽然起源于一种简单的浏览器脚本环境,但随着时间的发展,它已经演变为一种功能强大的编程语言,...

    网页开发面向对象思想深入理解

    网页开发面向对象思想深入理解的知识点涵盖了JavaScript编程语言的面向对象特性、数据类型、以及编程哲学。以下是对标题、描述、标签和部分内容中提及的知识点的详细阐述。 1. 面向对象思想在网页开发中的重要性 ...

    JavaScript面向对象程序设计

    在JavaScript面向对象编程中,随着Web2.0和Ajax技术的普及,JavaScript的角色从简单的表单验证扩展到了复杂的数据交互和页面动态更新。采用面向对象的编程风格可以使代码结构更加清晰,便于管理和维护。例如,...

    JavaScript面向对象编程

    ### JavaScript面向对象编程详解 #### 一、面向对象的基本概念 面向对象编程(Object-Oriented Programming, OOP)是一种程序设计范式,其核心思想是将数据与处理这些数据的方法封装在一起,形成一个个对象。在...

    js面向对象简单编程[文].pdf

    JavaScript是一种广泛应用于Web开发的脚本...以上就是JavaScript面向对象编程的一些核心概念和用法,这些知识对于理解和编写复杂的JavaScript代码至关重要。在实践中,这些概念经常结合使用,以实现丰富的功能和交互。

Global site tag (gtag.js) - Google Analytics