浅谈javascript的面向对象(OOP)
JavaScript 是一种描述性的脚本语言(Script Language),它可以非常自由地被嵌入到HTML 的文件之中。使用JavaScript 可以做什么呢?它的作用很简单,就是对网页浏览者当前所触发的事件进行处理或对网页进行初始化工作。它是事先在网页中编写好代码(或叫做“脚本”),然后此代码伴随Html文件一起传送到客户端的浏览器上,由浏览器对这些代码进行解释执行,而其执行期间并没有劳驾服务器帮忙,这样就减轻了服务器的负担。
许多编程高手都瞧不起JavaScript编程,认为只是小孩子的玩意。的确,JavaScript作为一种脚本语言,比起其他语言来说,显得非常简单,没有很复杂的语法,没有庞杂的体系架构。
2. 面向对象编程(Object-Oriented Programming)
一个世界,可以完全由对象组成,而将算法所基于的世界只用对象表现出来,再进行后续代码的编写,这种编程方法就被称作面向对象的编程思想。
OOP的三大要素:
1. 封装
2. 继承
3. 多态
3. JavaScript如何实现OOP
3.1. 封装(Wrap)
JavaScript的对象封装,主要依靠function来实现。以下是一个简单的示例:
//*********************************************
// 定义Pet(宠物)对象
//*********************************************
function Pet() {
//名称
this.name = null;
//颜色
this.color = null;
//获取名称
this.getName = function() {
return this.name;
};
//设置名称
this.setName = function(newName) {
this.name = newName;
};
//获取颜色
this.getColor = function() {
return this.color;
};
//设置颜色
this.setColor = function(newColor) {
this.color = newColor;
};
//定义一个需要实现的方法
this.getFood = null;
//获取宠物的描述信息
this.toString = function() {
return "The pet is " + this.name +",it's "+this.color+",and it likes "+this.getFood()+".";
};
}
3.2. 继承(inheritance)
JavaScript的继承的实现主要依靠prototype(原型)来实现,下面为Pet类编写一个子类。
//*********************************************
// 定义Cat(猫)对象
//*********************************************
function Cat() {
//实现Pet中定义的getFood方法
this.getFood = function() {
return "fish";
};
}
//声明Cat的原型,即Cat的父类
Cat.prototype = new Pet;
多层次继承
//*********************************************
// 定义PersianCat(波斯猫)对象
//*********************************************
function PersianCat() {
}
//声明PersianCat的原型,即PersianCat的父类
PersianCat.prototype = new Cat;
3.3. 重载(override)与多态(Polymorphism)
//重载Pet的toString方法
PersianCat.prototype.toString = function() {
return "It's just a persian cat.";
};
注意:Override和Overload的区别,JavaScript是不支持Overload的,原因是……你自己想想吧。
JavaScript是一种弱类型的语言,所以不要把它与C++、JAVA等语言进行比较。
4. 附录
4.1. 完整的示例
4.1.1. Pet.js
//*********************************************
// 定义Pet(宠物)对象
//*********************************************
function Pet() {
//名称
this.name = null;
//颜色
this.color = null;
//获取名称
this.getName = function() {
return this.name;
};
//设置名称
this.setName = function(newName) {
this.name = newName;
};
//获取颜色
this.getColor = function() {
return this.color;
};
//设置颜色
this.setColor = function(newColor) {
this.color = newColor;
};
//定义一个需要实现的方法
this.getFood = null;
//获取宠物的描述信息
this.toString = function() {
return "The pet is " + this.name +",it's "+this.color+",and it likes "+this.getFood()+".";
};
}
//*********************************************
// 定义Cat(猫)对象
//*********************************************
function Cat() {
//实现Pet中定义的getFood方法
this.getFood = function() {
return "fish";
};
}
//声明Cat的原型,即Cat的父类
Cat.prototype = new Pet;
//*********************************************
// 定义PersianCat(波斯猫)对象
//*********************************************
function PersianCat() {
}
//声明PersianCat的原型,即PersianCat的父类
PersianCat.prototype = new Cat;
//重载Pet的toString方法
PersianCat.prototype.toString = function() {
return "It's just a persian cat.";
};
//*********************************************
// 定义Dog(狗)对象
//*********************************************
function Dog() {
//实现Pet中定义的getFood方法
this.getFood = function() {
return "bone";
};
}
//声明Dog的原型,即Dog的父类
Dog.prototype = new Pet;
4.1.2. Pet.htm
<script language="javascript" src="Pet.js" >
</ script >
< script language="javascript">
//定义一个Cat对象
var cat = new Cat();
cat.setName("MiMi");
cat.setColor("white");
//定义一个Dog对象
var dog = new Dog();
dog.setName("WangWang");
dog.setColor("yellow");
//定义一个PersianCat对象
var persianCat = new PersianCat();
//定义数组,保存上面的三个对象
var pets = new Array(3);
pets[0] = cat;
pets[1] = dog;
pets[2] = persianCat;
//测试程序
for(var i=0,size=pets.length;i<size;i++) {
alert(pets[i].toString());
}
</script>
4.1.3. 运行结果
弹出三个对话框,分别如下:
The pet is MiMi,it's white,and it likes fish.
The pet is WangWang,it's yellow,and it likes bone.
It's just a persian cat.
浅谈javascript的面向对象(OOP)相关推荐
- python封装继承多态_浅谈JavaScript的面向对象和它的封装、继承、多态
写在前面 既然是浅谈,就不会从原理上深度分析,只是帮助我们更好地理解... 面向对象与面向过程 面向对象和面向过程是两种不同的编程思想,刚开始接触编程的时候,我们大都是从面向过程起步的,毕竟像我一样, ...
- 浅谈JavaScript的面向对象和它的封装、继承、多态
写在前面 既然是浅谈,就不会从原理上深度分析,只是帮助我们更好地理解- 面向对象与面向过程 面向对象和面向过程是两种不同的编程思想,刚开始接触编程的时候,我们大都是从面向过程起步的,毕竟像我一样,大家 ...
- 浅谈javascript中原型(prototype)、构造函数、对象实例及三者之间的关系
转自:http://www.cnblogs.com/zhangwei412827/archive/2012/12/14/2816263.html 浅谈javascript中原型(prototype). ...
- 浅谈JavaScript作用域,关于Java的学习路线资料
javascript是目前web领域中使用非常广泛的语言,不管是在前端还是在后端都能看到它的影子,可以说web从业者不论怎样都绕不开它.在前端领域,各种框架层出不穷.在后端领域,nodejs可谓如火如 ...
- 浅谈 JavaScript 编程语言的编码规范--转载
原文:http://www.ibm.com/developerworks/cn/web/1008_wangdd_jscodingrule/ 对于熟悉 C/C++ 或 Java 语言的工程师来说,Jav ...
- JavaScript 中的 require / exports、import / export、浅谈JavaScript、ES5、ES6
Node.js 的基础教学 之 exports 和 module.exports:https://zhuanlan.zhihu.com/p/82057593 浅谈 JavaScript.ES5.ES6 ...
- html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight...
浅谈JavaScript中scrollTop.scrollHeight.offsetTop.offsetHeight 发布时间:2020-07-17 09:27:20 来源:亿速云 阅读:223 作者 ...
- 浅谈 JavaScript 编程语言的编码规范
转自:http://www.ibm.com/developerworks/cn/web/1008_wangdd_jscodingrule/?ca=drs-tp4608 developerWorks 中 ...
- 浅谈JavaScript中的NaN
浅谈JavaScript中的NaN NaN概念以及简单案例 追寻的纯粹该拥有自己的本质.-JC.F 什么是NaN? NaN:NaN(Not a Number),它表示不是数字,但是仍是数值类型. Na ...
最新文章
- java.net.UnknownHostException: unknown host:xxxx异常解决办法
- ABAP选择屏幕建议
- Hulu直播服务难点解析(二):系统设计与实现
- 计算机如何打开无线网络适配器,win7系统下网络适配器打不开怎么解决
- F. Cowmpany Cowmpensation(树形dp + 拉格朗日插值)
- CF1500C Matrix Sorting(拓扑排序)
- 【牛客 - 280A】勘测(fib数列,思维,打表)
- weblogic漏洞复现(CVE-2020-2555)
- Multisim、protel和proteus的区别
- WebLogic 12c与Oracle Database 12c的集成
- Java static、 final修饰符
- Java Integer类
- springboot 多环境配置文件
- html5怎么插入一段文字,HTML5教程—文字插入进度动画_HTML5教程_文字插入_动画进度_课课家...
- BC95-G NB-IOT 模块使用
- ABP开发框架前后端开发系列---(1)框架的总体介绍
- CoffeeScript基础
- 几种方式加速网页视频播放速度
- splunk篇5-导出csv文件中文乱码
- html基础之好看的header
热门文章
- matlab network_无所不能的 MATLAB
- Spring笔记001 Spring容器的基本实现—— Spring的结构组成
- systemtap调试linux内核源码,内核调试工具SystemTap:适合懒人的printk替代品
- python类与方法与函数_Python 中的函数与类的方法
- java webpack web项目_vue+webpack项目搭建
- python元组是有序还是无序_python-03 元组和字典
- linux资源异常无法fork,linux 下 fork 后的文件资源处理问题
- 利用系统级别的光谱成像技术分析细胞器的互作组学
- 银行家算法的数组方式实现
- tomcat websock html5,websocket实战(4) websocket版贪食蛇游戏(tomcat官方自带)