day58—JavaScript面向对象（一）
转行学开发，代码100天——2018-05-13
“面向对象”对于学习过C++及JAVA的开发者来说并不陌生。有意思的是面向对象的思路可以用于面对或解决生活工作中的其他问题，简单地说就是“只关注功能，不注重细节”。
产品上：只注重某模块的功能及接口，多个模块对象组合最终满足我的总体要求即可。
管理上：对于项目负责人进行进度跟踪，具体执行工作由负责人具体安排和部署。
...这里多多少少都有些面向对象的意思。
言归正传。JavaScript中的面向对象。
如：下面的一段程序代码中，通过工厂模式创建并使用对象。
<script type="text/javascript">
function CreatePerson(name,qq)
{
var obj = new Object();
obj.name =name;
obj.qq = qq;
obj.showName = function()
{
alert('我的名字叫：'+this.name);
}
obj.showQQ = function()
{
alert('我的QQ是：'+this.qq);
}
return obj;
} //对象
var obj1 = CreatePerson("allen","123558");
obj1.showName();
obj1.showQQ();
var obj2 = CreatePerson("tom","8151875");
obj2.showName();
obj2.showQQ();
</script>
这里我们可以注意到我们的基本功能得到了实现，但是细想之下。这里依然存在一些问题。
问题1：不符合习惯的new方式。
new 对象 的对象创建方式有两个功能特点：
1 创建对象
2 返回对象
因此可以对上述的对象创建过程进行优化
<script type="text/javascript">
function CreatePerson(name,qq)
{
var obj = new Object();
this.name =name;
this.qq = qq;
this.showName = function()
{
alert('我的名字叫：'+this.name);
}
this.showQQ = function()
{
alert('我的QQ是：'+this.qq);
}
// return obj;
} //对象
var obj1 = new CreatePerson("allen","123558");
obj1.showName();
obj1.showQQ();
var obj2 = new CreatePerson("tom","8151875");
obj2.showName();
obj2.showQQ();
alert(obj1.showName==obj2.showName);
</script>
问题2：上述代码中
alert(obj1.showName==obj2.showName); 返回值均为false
也是说，showName()与showQQ()方法会随着对象创建而创建，且每个均不同。这就造成了资源的消耗和浪费。
解决这个问题的方式是将方法不再与对象绑定，而是添加到原型上。
function CreatePerson(name,qq) //构造函数
{
var obj = new Object();
this.name = name;
this.qq = qq;
} CreatePerson.prototype.showName = function(){
alert('我的名字是：'+this.name);
}
CreatePerson.prototype.showQQ =function(){
alert('我的QQ是：'+this.qq);
} var obj1 = new CreatePerson('allen','123558');
obj1.showName();
obj1.showQQ();
var obj2 = new CreatePerson('tom','8151875');
obj2.showName();
obj2.showQQ(); alert(obj1.showName==obj2.showName); </script>
此时 alert(obj1.showName==obj2.showName);返回值为true，及说明虽然创建了两个对象，但是没有改变原型函数。 因此，上述的优化表现在：在构造函数上添加属性，在原型上添加方法。这种创建对象的方式又称混合方式创建对象。
最后，举一个应用的实例——面向对象的选项卡
<!DOCTYPE html>
<html>
<head>
<title>面向过程的选项卡</title>
<style type="text/css">
#div1 input{background: white; }
#div1 input.active{background: yellow;}
#div1 div{width: 200px; height: 200px;background: #ccc;display: none;}
</style> <script type="text/javascript">
window.onload = function()
{
new TabSwitch("div1");
}; function TabSwitch(id){
var _this = this;
var oDiv = document.getElementById(id);
this.aBtn = oDiv.getElementsByTagName("input");
this.aDiv = oDiv.getElementsByTagName("div");
for (var i = 0; i < this.aBtn.length; i++) {
this.aBtn[i].index = i;
this.aBtn[i].onclick = function()
{
_this.fnClick(this);
}
}
} //选项卡点击 TabSwitch.prototype.fnClick = function(oBtn)
{
for (var i = 0; i <this.aBtn.length; i++) {
this.aBtn[i].className ='';
this.aDiv[i].style.display ='none';
}
oBtn.className='active';
this.aDiv[oBtn.index].style.display ='block';
};
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="aaa">
<input type="button" value="bbb">
<input type="button" value="ccc">
<div style="display: block;">aaaafds</div>
<div>bbdsvsvvb</div>
<div>ccsvsavc</div>
</div>
</body>
</html>
至此，逐步体验了通过面向过程到面向对象的转变，面向对象的一个特点在于：
1.对象中不能有函数套函数，可以有全局变量
2.代码方式改变：
onload ->构造函数
全局变量->属性
函数->方法
day58—JavaScript面向对象（一）的更多相关文章
- JavaScript学习笔记(三)——this、原型、javascript面向对象
一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...
- JavaScript学习总结(三)——this、原型、javascript面向对象
一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...
- Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇
Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...
- javascript面向对象系列第四篇——选项卡的实现
前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡. ...
- javascript面向对象系列第三篇——实现继承的3种形式
× 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...
- javascript面向对象系列第一篇——构造函数和原型对象
× 目录 [1]构造函数 [2]原型对象 [3]总结 前面的话 一般地,javascript使用构造函数和原型对象来进行面向对象编程,它们的表现与其他面向对象编程语言中的类相似又不同.本文将详细介绍如 ...
- Javascript面向对象(封装、继承)
Javascript 面向对象编程(一):封装 作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程( ...
- 《javascript面向对象精要》读书笔记
<javascript面向对象精要> 买这本书的原因主要是因为作者,Nicholas C. Zakas 牛X闪闪的js专家,读过js高程的应该都知道他,而这本书是他的最新力作,感觉也是js ...
- 【转】javascript面向对象编程
摘要:本文本来是想自己写的,奈何花了好长时间写好之后忘记保存,还按了刷新键,一键回到解放前,索性不写了,所以本文是转载的. 面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式,主要包括模块化. ...
随机推荐
- 并查集专题: HDU1232畅通工程
畅通工程 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
- 通过编写串口助手工具学习MFC过程——（七）添加Tab Control控件
通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...
- 20170309工作笔记--------如何用好dialog，想变什么样就变成什么样
(1)首先自定义一个dialog的div,并且写内容 (2)运用相应的代码进行控制,弹出dialog $(".tel").click(function() { $("#d ...
- jupyter与requests的初步使用
upyter 是一个简易的,方便的写Python代码的工具包,requests是Python里非常好用的用来发送 http 请求的包. 开始学习本教程之前,请确保你已经安装了Python,并且安装了P ...
- 在django中使用循环与条件语言
{% if not Article_type_id %} <li class="active"><a href="/">全部</a ...
- 关于BeanUtils.copyProperties的用法和优缺点
一.简介: BeanUtils提供对Java反射和自省API的包装.其主要目的是利用反射机制对JavaBean的属性进行处理.我们知道,一个JavaBean通常包含了大量的属性,很多情况下,对Jav ...
- 切入点表达式execution()
用于描述方法 [掌握] 语法:execution(修饰符 返回值 包.类.方法名(参数) throws异常) 修饰符,一般省略 public 公共方法 * ...
- Java多线程(1)
线程与进程 进程:程序的执行过程 线程:线程共享进程的资源 Java多线程 实现的方式 继承Tread类:使用getName()获取当前线程名 实现Runnable接口:Thread.currentT ...
- Linux学习--第二天--分区、格式化、系统安装、vmware、远程管理工具
分区 主分区加上扩展分区只能有四个,其中扩展分区只能有一个,扩展分区不能写入数据,不能格式化,只能包含逻辑分区.这是硬盘的限制. 格式化 分为高级与低级.文件系统是高级格式化.低级是硬盘操作. 扩展分 ...
- Educational Codeforces Round 68 (Rated for Div. 2) D. 1-2-K Game （博弈， sg函数，规律）
D. 1-2-K Game time limit per test2 seconds memory limit per test256 megabytes inputstandard input ou ...