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 相关文章推荐
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
JS搜狐面试题分析
Dec 16 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 Javascript
使用js获取身份证年龄的示例代码
Dec 11 Javascript
微信小程序自定义支持图片的弹窗
Dec 21 Javascript
VUE实现吸底按钮
Mar 04 Vue.js
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与MySQL开发的8个技巧小结
2010/12/17 PHP
探讨各种PHP字符串函数的总结分析
2013/06/05 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
python连接mysql并提交mysql事务示例
2014/03/05 Python
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
在Python的web框架中配置app的教程
2015/04/30 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
入党自我鉴定范文
2013/10/04 职场文书
建筑公司文秘岗位职责
2013/11/29 职场文书
材料采购员岗位职责
2013/12/17 职场文书
股份合作协议书
2014/04/12 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
安全环保演讲稿
2014/08/28 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书