`

用面向对象的方式封装javascript(Animal.js ,Bird.js,People.js)

JavaScriptprototypeMicrosoftCSSHTML 
阅读更多

javascript 虽然是弱类型检查的脚本语言，可是它也有很多面向对象的特性，因此我们可以模仿java语言的抽象、继承 和封装 来处理javascript 代码。

还是以例子来进行说明。在这里给出3个js 和一个用于测试的 html。

1、Animal.js 的内容

2、Bird.js 的内容 

3、People.js 的内容

4、Test.html 的内容


===== 1 Animal.js 的内容 ===========

// * * * * * * * * * * * * * * * * * * * *
// * Animal
// * desc:定义一个超类
// * time：2008-11-11
// * author：dxl
// *
// * Dependencies: null
// * * * * * * * * * * * * * * * * * * *

//定义静态变量
Animal.CREATOR = "上帝";
Animal.HOME = "地球";

//构造器
function Animal(){}

//构造器
function Animal(weight){
//初始化成员变量
this.weight = weight;
}

//定义成员变量
Animal.prototype.weight = 0;//重量

//定义行为方法(公共方法)
Animal.prototype.eat = function (args){
return "吃食";
};
//定义行为方法(公共方法)
Animal.prototype.move = function (args){
return "行";
};

//定义行为方法(私有方法)
Animal.prototype._animalPrivateMethod = function (args){
return args.length;
};

===== 1 end ====================


===== 2 Bird.js 的内容 ===========

// * * * * * * * * * * * * * * * * * * * *
// * Bird
// * desc:定义Animal的子类
// * time：2008-11-11
// * author：dxl
// *
// * Dependencies: Animal.js
// * * * * * * * * * * * * * * * * * * * /

//定义静态变量
Bird.SciName = "鸟";


//构造器
function Bird(){}

//构造器
function Bird(weight){
//初始化成员变量
this.weight = weight;
}

//Bird 是 Animal 的子类, 继承
Bird.prototype = new Animal();

//定义行为方法(公共方法)
Bird.prototype.eat = function (args){
return "吃生食";
};
//定义行为方法(公共方法)
Bird.prototype.move = function (args){
return "飞行";
};


//定义行为方法(私有方法)
Animal.prototype._birdPrivateMethod = function (args){
return args.length;
};

===== 2 end ====================

===== 3 People.js 的内容 ===========

// * * * * * * * * * * * * * * * * * * * *
// * People
// * desc:定义一个Animal的子类
// * time：2008-11-11
// * author：dxl
// *
// * Dependencies: Animal.js
// * * * * * * * * * * * * * * * * * * * /

//定义静态变量
People.SciName = "人";

//构造器
function People(){} 

//构造器
function People(weight){
//初始化成员变量
this.weight = weight;
}

//People 是 Animal 的子类, 继承
People.prototype = new Animal();

//定义行为方法(公共方法)
People.prototype.eat = function (args){
return "吃熟食" ;
};
//定义行为方法(公共方法)
People.prototype.move = function (args){
return "步行";
};

//定义行为方法(私有方法)
People.prototype._peoplePrivateMethod = function (args){
return args.length;
};

===== 3 end ====================

 

===== 4 Test.html 的内容 ===========

<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<meta name="author" CONTENT="DONG_XUELIN">
<title>采用对象方式封装javascript代码</title>
<script type="text/javascript" src="Animal.js"></script>
<script type="text/javascript" src="Bird.js"></script>
<script type="text/javascript" src="People.js"></script>
<style type="text/css">
body{ background:#fff;}
.button{
background:#eee;
border: #666688 1px solid;
padding-right: 2px;
padding-left: 2px;
font-size: 12px;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#c1c1ce);
cursor: hand;
color: black;
padding-top: 2px;
onmouseover:expression(onmouseover=function (){this.className='button_over'});
onmouseout:expression(onmouseout=function (){this.className='button'});

 

onmousedown:expression(onmousedown=function (){this.className='button_down'});
}
.button_over {
background:#fff;
border: #666688 1px solid;
padding-right: 2px;
padding-left: 2px;
font-size: 12px;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#c1c1ce, EndColorStr=#ffffff); cursor: hand;
color: black;
padding-top: 2px;
}
.button_down{
background:#fff;
border: #666688 1px solid;
padding-right: 2px;
padding-left: 2px;
font-size: 12px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#c1c1cd, EndColorStr=#ffffff); cursor: hand;
color: black;
padding-top: 2px;
}
</style>
</HEAD>
<BODY>

<table id="theTable_1" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
<td align="left" width="20%">Animal weight：</td>
<td align="left"><input type="text" id="inputObj_x_id" name="inputObj_x_name" value="1" title="必须输入0-9999内的数字"/></td>
</tr>
<tr>
<td>&nbsp;</td>
<td align="left" width="20%">Bird weight：</td>
<td align="left"><input type="text" id="inputObj_y_id" name="inputObj_y_name" value="10" title="必须输入0-9999内的数字"/></td>
</tr>
<tr>
<td>&nbsp;</td>
<td align="left" width="20%">People weight：</td>
<td align="left"><input type="text" id="inputObj_z_id" name="inputObj_z_name" value="100" title="必须输入0-9999内的数字"/></td>
</tr>
<tr>
<td colspan="3">
<input type="button" class="button" onclick="viewResult() ;" value="查看结果" />
<input type="button" class="button" onclick="removeConsole();" value="清除控制台" />
</td>
</tr>
</table>
<br>
<br>
<table id="theTable_2" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="headRow">
<td>console[信息台]</td>
</tr>
</table>
<br>
</BODY>
<div id="console_id" style="height:150;overflow-y:auto;width:100%;"></div>
<SCRIPT language="javascript">
var inputObj_x = document.getElementById("inputObj_x_id");//x input object
var inputObj_y = document.getElementById("inputObj_y_id");//y input object
var inputObj_z = document.getElementById("inputObj_z_id");//z input object
var consoleObj = document.getElementById("console_id");//console div object

 

//打印信息到控制台
function printMsg2Console(message,color){
if(message == 'undefined') return;
if(!color) color = 'black';

if(consoleObj == 'undefined')
consoleObj = document.getElementById("console_id");


var newChild = document.createElement("<span style='padding-bottom:4px;font-size:12px;color:" color "'>");
newChild.innerText = message;
consoleObj.appendChild( newChild );
newChild = document.createElement("<br>");
consoleObj.appendChild( newChild );
newChild.scrollIntoView(true);
} 

//清除控制台的信息
function removeConsole(){
if(consoleObj == 'undefined')
consoleObj = document.getElementById("console_id");

 

consoleObj.innerHTML = "";
}


//查看 动物， 鸟， 人 对象的结果
function viewResult(){
//打印全局变量 以及 函数执行结果
var x = inputObj_x.value;
var y = inputObj_y.value;
var z = inputObj_z.value;

var animal = new Animal(x);
var bird = new Bird(y);
var people = new People(z);

var result = "animal \tweight = " animal.weight "; eat = " animal.eat() "; move = " animal.move()
"\nbird \t\t\tweight = " bird.weight "; eat = " bird.eat() "; move = " bird.move()
"\npeople \tweight = " people.weight "; eat = " people.eat() "; move = " people.move();

printMsg2Console(result, "black"); 

}


</SCRIPT>
</HTML>

===== 4 end ====================

分享到：
| JavaScript面向对象编程
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Scratch 手速判断游戏：反弹之神.sb3

    游戏警报：潜入“反弹”，这是一种充满活力的街机体验，你的反应主宰了竞技场！受youtuber Dani 一天游戏挑战的启发，你就是一个肩负使命的球：发射、得分、生存！ 为你的射击蓄力：按住鼠标等待射击时间。 瞄准并发射：释放以朝光标射击。距离等于速度和弹跳力！ 得分：击球得分。 避开格林：他们是游戏终结者！ 阻止红色和紫色：如果他们垫底，他们会伤害你的健康。紫色添加了随机反弹的狂野扭曲！ SJA 分析数据： · 代码数量： 代码总数：4775 ，有效代码：4671 ，代码块：164 ； · 高级编辑： 扩展种类：2 ，函数定义：49 ，变量 & 列表定义：165 ； · 资源数量： 角色数：12 ，造型数量：444 ，音频数量：54 ； · 资源大小： 工程大小：19.1MB ，音频大小：15.4MB ，造型大小：1.7MB 。 此后仍有作品或有趣游戏，可以进行学习与借鉴。请关注作者，且点赞加收藏，记得推荐好友。下载即可游玩，快来下载吧！五星好评可以私信我，免费送资源！快来评论吧！

    【课程设计】实现的金融风控贷款违约预测python源码.zip

    【课程设计】实现的金融风控贷款违约预测python源码.zip

    一个基于STM32F103单片机的无线测距系统.zip

    一个基于STM32F103单片机的无线测距系统.zip

    node-v0.10.9-sunos-x86.tar.gz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

    PiP-Tool.msi

    PiP-Tool

    node-v0.10.10-sunos-x86.tar.gz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

    node-v0.10.30-sunos-x64.tar.gz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

    JAVA网络通信系统的研究与开发(LW+源代码+开题报告).zip

    JAVA网络通信系统的研究与开发(LW+源代码+开题报告)JAVA网络通信系统的研究与开发(LW+源代码+开题报告).JAVA网络通信系统的研究与开发(LW+源代码+开题报告).JAVA网络通信系统的研究与开发(LW+源代码+开题报告).JAVA网络通信系统的研究与开发(LW+源代码+开题报告).JAVA网络通信系统的研究与开发(LW+源代码+开题报告).JAVA网络通信系统的研究与开发(LW+源代码+开题报告).JAVA网络通信系统的研究与开发(LW+源代码+开题报告).JAVA网络通信系统的研究与开发(LW+源代码+开题报告).JAVA网络通信系统的研究与开发(LW+源代码+开题报告).JAVA网络通信系统的研究与开发(LW+源代码+开题报告).JAVA网络通信系统的研究与开发(LW+源代码+开题报告).

    Supervised_contrastive_loss_pytorch-main.zip

    Supervised_contrastive_loss_pytorch-main

    node-v4.1.0-darwin-x64.tar.xz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

    node-v0.12.14-darwin-x86.tar.xz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

    nodejs-x64-0.11.4.tgz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

    人工智能+深度学习+深度学习数学基础+整理完整版

    【项目资源】：汇聚了云计算、区块链、网络安全、前端设计、后端架构、UI/UX设计、游戏开发、移动应用开发、虚拟现实（VR）、增强现实（AR）、3D建模与渲染、云计算服务、网络安全工具等各类技术项目的素材和模板。包括AWS、Azure、Docker、Kubernetes、React、Vue、Angular、Node.js、Django、Flask、Unity、Unreal Engine、Blender、Sketch、Figma、Wireshark、Nmap等项目的素材和模板。【项目质量】：所有素材和模板都经过精心筛选和整理，确保满足专业标准。在发布前，我们已经对功能进行了全面测试，确保其稳定性和可用性。【适用人群】：适合对技术充满热情的初学者、希望提升专业技能的中级开发者、以及寻求创新解决方案的高级工程师。无论是个人项目、团队合作、课程设计还是商业应用，都能在这里找到合适的资源。【附加价值】：这些项目资源不仅具有很高的学习价值，而且能够直接应用于实际项目中，提高开发效率。对于有志于深入研究或拓展新领域的人来说，它们提供了丰富的灵感和基础框架，帮助你快速构建出令人惊艳的作品。

    node-v0.10.45-linux-x86.tar.gz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

    第八节.py

    第八节.py

    node-v0.10.37-sunos-x86.tar.gz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

    螺旋丸，svg，真的好像！！！

    svg，真的好像！！！

    node-v0.11.4-x86.msi

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

    通用nvme模块.rar

    技嘉B85M-DS3H-REV:2.0版本-mmtool刷BIOS-nvme模块

Magicbox
Global site tag (gtag.js) - Google Analytics