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 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
javascript,jquery闭包概念分析
Jun 19 Javascript
用js来解决ajax读取页面乱码
Nov 28 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
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数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
JavaScript学习历程和心得小结
2010/08/16 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
医院我们的节日活动实施方案
2014/08/22 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫