javascript每日必学之封装


Posted in Javascript onFebruary 23, 2016

朋友们好,前面我们已经讲解了有关javascript的基础,从今天的内容开始,我们就要开始讲有关封装的内容了,这里,我们就一点一点地接触到OOP(面向对象编程)了,如果作为一门语言使用的程序员连OOP都不知道是什么,或者只听说过,自己没有去领悟,不能写出面向对象的代码,那么也没有学习程序的必要了,下面我先会给大家详细的介绍面向对象是什么,面向过程是什么,要想弄明白面向对象,首先我们就必须知道面向过程。在你已经弄明白了面向过程之后,我们也不能盲目地为了OOP而OOP,那样只会是做一些徒劳的事,因为在大多数时候,我们写一些代码只是为了解决一小事情,那么,我们就没必要写OOP了,只需要写一些面向过程的代码就可以了,用个词来形容“因地制宜”。

我们就先从面向过程开始,先来解释一下过程是什么意思,我们平时所说的“程序”二字其实过程,执行一个程序,也就是执行一个过程,例如:上班,就是一个程序,其中的过程经过是,9点准时到公司,做一些自己应该完成的事,下午6点不管做成什么样,上班的过程做完了,离开公司,这就是过程;再来个更具体的例子,取款,执行的过程我们就写得更明白一点:

1、带上银行卡到ATM

2、插入银行卡

3、输入密码

4、输入取款数目

5、ATM吐钞

6、把钱放入自己兜里

6、如果发现没有取到自己想要数,返回第4步

7、如果要打印回执单,就点击打印回执单;如果不打印,就省略该步骤

8、退卡

9、程序完毕

从上面的步骤我们可以看出,从第一步到最后一步,这就是执行顺序,第4到第6步就是一个循环过程,第7步是个分支过程,这就是过程,也就是程序。我们写代码的目的就是模拟一些行为过程,用计算机的高速运算的特点为我们的生活服务。

我们就可以把取款封装成一个函数,这样,这就是一个独立的过程,在需要的时候,我们就可以调用这个函数,就能完成我们的工作需要,下面我们就用一个最简单的例子来表达一个最简单的程序过程

function KissWife(whoseWife){
 console.log(whoseWife+"把脸凑过来");
 console.log("我把嘴唇印上去");
 console.log("木啊一声");
 console.log("亲"+whoseWife+"一次完成");
}

KissWife("我老婆");

javascript每日必学之封装

看图说话,在合适的时候,我们调用KissWife函数,输入合适参数,我们执行完一个过程了。

OOP的目的就是提高代码的重用率,用最少的代码干尽量多的事,使用参数,也是面向对象编程的一种体现,我们来举个反例,如果我们在不使用参数的情况下,我们在想亲别人老婆的时候,就要重新写一个KissWife函数,这样,我们就写了大量重复的代码,不方便代码管理,诸多不便,方法不顺溜,就算在亲别人老婆的时候被发现的机率就大大增加了,带来了一些不必要的麻烦。

这时候有同学想问了,我觉得,我觉得我不习惯使用参数,就是不想传递参数,代码管理哪里会出现不方便管理呢?好,这个问题问得相当的到位。

我来解释一下吧,如果在这个过程执行过程中,我们发现有不合理的地方,需要修改,例如,我还想伸个舌头啥的,我们就要在亲自己老婆的函数中修改(麻烦),还要在亲别人老婆的函数中修改(麻烦+1),当我们有很多个类似的函数的时候,是不是要全部做修改(麻烦+n);第二个坏处就是修改次数多了,你能保证一次性全部修改都不会出错吗(容易失误),这就能体现出了,如果我们只是完全写一些重复性的代码,工作效率大打折扣。

通过上面的讲解,其实新手读者们还是没能理解什么是OOP(面向对象编程),我们现在就从对象(object)开始讲解,这里的对象,不能单纯地理解成谈恋爱时所处的男女朋友,对象是指世间的万事万物,太阳,大海,人,宠物……;每一种我们可以想得到的事物,每一个对象都有自己的属性,行为。

javascript每日必学之封装

我们就可以像上图这样来理解,鸟就是一个对象,它有自己属性,有自己的行为,下面我们就用具体代码来封装一个关于鸟的类。(注:在javascript语言中function关键字中仅仅用来定义函数,也可以定义类,它不能像高级语言那样使用Class关键字,后面我们讲继承的时候,我们还会用特殊方法来实现继承)

//声明一个鸟类
function Bird(){
 this.name = "鸽子";
 this.color = "灰色";
 this.habitat = "笼子";
 this.weight = "500克";
}

//使用原型链的方式,来定义鸟的行,也可以用来定义属性,但是,属性一般用this关键字来声明
//行为和属性,其实同一个级别的,后面我们用for in来给大家验证

//鸣叫
Bird.prototype.Sing = function(){
 console.log("咕咕咕");
}
//进食
Bird.prototype.Eat = function(){
 console.log("吃了一粒玉米");
}
//飞翔
Bird.prototype.Fly = function(){
 console.log("在天空中飞翔着");
}
//孵蛋
Bird.prototype.Brood = function(){
 cossole.log("正在孵化鸽子蛋");
}

现在我们类已经声明好了,但是我们,怎么使用它呢?现在它只是一个类,还不是实例,就是我口头上所说的鸽子,实例,就是一只具体的鸽子,怎么才能得到一只具体的鸽子呢?看下面的代码

//用new 关键字来获得一个实例
var gezi = new Bird();

现在我们就可以调用它的属性,以及方法了

javascript每日必学之封装

通过这样的方法我们所得到的每一个鸽子其实都是一样的,我们要怎么才得到有自己特征的鸽子呢?有自己独有特征,其实就是属性不一样,那们我们就来改造一下函数的声明

//其实我们只需要在这里小小地修改一下
function Bird(_color,_habitat,_weight){
 this.name = "鸽子";
 this.color = _color;
 this.habitat = _habitat;
 this.weight = _weight;
}

然后我们来看一下实例化一个鸽子的时候,怎么做

//我们现在就实例化了两个鸽子
var gezi_A = new Bird("白色","野外","300克");
var gezi_B = new Bird("灰白色","温室","550克");

javascript每日必学之封装

这样,我们就可以构造出有自己特征的鸽子出来了,从上面的例子,我们其实已经不难看出,封装,其实就是把我们可以形容的对象用类来表示,我们就可通过new关键字来实例化出对象,这个对象就有自己独立的属性,行为,这样的一个对象,我们就可以方便的供我们操作,封装就是一种体现OOP的方法,我们先是封装一个类,然后,再new 出实例,这样写就比我们直接用代码来构造两次鸽子类少了很多的代码,如果我们还构造第3只鸽子,就再new 一次就可以了,构造对象的时候,就感觉一句代码的事。提高代码的重用率,OOP就这样体现出来了。

这时候,有人问了,只是在说我们用OOP的好处 ,还没有看到不用OOP的代码到底怎么写,那们就来一个不用OOP的方式,同样以鸽子为例

//声明一个鸽子
function GeZi_C(){
 console.log("种类是鸽子");
 console.log("颜色是蓝色");
 console.log("住在树梢上");
 console.log("体重400克");
 console.log("在天空中飞翔着");
}
//执行一次
GeZi_C();

javascript每日必学之封装

如果我们要再声明100个鸽子,是不是要写大量重复类似上面这样的代码呀,这就是面向过程的代码。相信新手朋友们已经有一个模糊的OOP概念了吧,慢慢体会,这种感觉不一两天就能弄明白的,一口吃不成大胖子,后面我们还会继续讲OOP思想的继承和多态。

继续先前在声明Bird类的时候,说的属性和行为是同一级别,而且是可以用两种方式来声明,属性在构造函数里面用 this 关键字声明,行为函数用 prototype 关键字来声明,prototype就是函数原型链的标准扩展,我们之所以这样来写,就是把javascript语言的使用代入高级语言的范畴,用来模拟高级语言的使用,扯远了,我们先来验证一下Bird实例对象中是不是拥有在同一级别的属性跟行为函数

//我们现在是用的前面的没有参数的Bird类
var obj = new Bird();

//逐一打印出来
for(var pro in obj){
  console.log(pro + " : " + obj[pro]);
}

javascript每日必学之封装

看到了吧,for...in就作用就是用来循环遍历对象的属性以及数组的下标,行为函数的名称其实也是对象的属性,现在就验证了前面的说法,相信大家现在对OOP的封装思想有一定的认知了。

总结一下,今天我们所讲的东西其实就是把事物给抽象的拟态一下,然后,把这些属性行为给封装成一个类,使用new关键字实例化出具体对象,这样大大地提高了代码的使用率,提高了工作效率。

Javascript 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
js实现聊天对话框
Feb 08 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 #Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 #Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 #Javascript
JavaScript tab选项卡插件实例代码
Feb 23 #Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 #Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 #Javascript
全面解析Bootstrap布局组件应用
Feb 22 #Javascript
You might like
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
php判断访问IP的方法
2015/06/19 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
PHP如何将XML转成数组
2016/04/04 PHP
微信支付开发交易通知实例
2016/07/12 PHP
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
Python httplib模块使用实例
2015/04/11 Python
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
Python切片索引用法示例
2018/05/15 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
python实现在线翻译
2020/06/18 Python
学python爬虫能做什么
2020/07/29 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
教师三严三实心得体会
2014/10/11 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书
营销计划书范文
2015/01/17 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
Java 多线程并发FutureTask
2022/06/28 Java/Android
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS