利用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面向对象编程详解 #### 一、引言与背景 JavaScript作为一种解释型、基于对象的脚本语言，自1995年诞生以来，经历了从简单的表单验证功能到现代Web开发核心技术之一的巨大转变。随着AJAX技术的兴起和...
JavaScript，作为一种广泛应用于Web开发的动态脚本语言，最初被设计为简单的客户端脚本语言，但随着技术的发展，它已经发展出了丰富的面向对象编程（OOP）特性。面向对象JavaScript开发是现代Web开发中不可或缺的一...
JavaScript的核心在于对象、原型和隐式继承，这些都是理解其面向对象特性的重要概念。 首先，让我们深入理解对象。在JavaScript中，一切皆为对象，包括函数。你可以直接通过对象字面量或者构造函数来创建对象。对象...
在本文档《js面向对象简单编程.pdf》中，主要介绍了JavaScript面向对象编程的基本概念和方法，涵盖创建对象、原型链、构造函数、类等面向对象编程的核心知识点。文档中虽然存在OCR扫描识别错误，但整体内容还是能够...
### JavaScript面向对象编程详解 #### 引言 在软件工程领域，面向对象编程（OOP）是一种编程范式，它使用“对象”来设计软件。每个对象都可以包含数据（属性）和方法（行为）。JavaScript虽然起初并非为面向对象...
总结来说，JavaScript面向对象编程涵盖了从基本原理到实现细节的多个方面，包括但不限于对象、构造函数、原型链、继承以及封装等。本书系统地介绍了这些知识点，并通过实例演示了如何在现代JavaScript中实现OOP，...
### JavaScript面向对象编程详解 #### 一、JavaScript面向对象编程简介 JavaScript作为一种广泛使用的脚本语言，虽然起源于一种简单的浏览器脚本环境，但随着时间的发展，它已经演变为一种功能强大的编程语言，...
网页开发面向对象思想深入理解的知识点涵盖了JavaScript编程语言的面向对象特性、数据类型、以及编程哲学。以下是对标题、描述、标签和部分内容中提及的知识点的详细阐述。 1. 面向对象思想在网页开发中的重要性 ...
### JavaScript面向对象编程详解 #### 一、面向对象的基本概念 面向对象编程（Object-Oriented Programming, OOP）是一种程序设计范式，其核心思想是将数据与处理这些数据的方法封装在一起，形成一个个对象。在...
JavaScript是一种广泛应用于Web开发的脚本...以上就是JavaScript面向对象编程的一些核心概念和用法，这些知识对于理解和编写复杂的JavaScript代码至关重要。在实践中，这些概念经常结合使用，以实现丰富的功能和交互。