javascript大神修炼记(5)——OOP思想(封装)
读者朋友们好,前面我们已经讲解了有关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("我老婆");
看图说话,在合适的时候,我们调用KissWife函数,输入合适参数,我们执行完一个过程了。
OOP的目的就是提高代码的重用率,用最少的代码干尽量多的事,使用参数,也是面向对象编程的一种体现,我们来举个反例,如果我们在不使用参数的情况下,我们在想亲别人老婆的时候,就要重新写一个KissWife函数,这样,我们就写了大量重复的代码,不方便代码管理,诸多不便,方法不顺溜,就算在亲别人老婆的时候被发现的机率就大大增加了,带来了一些不必要的麻烦。
这时候有同学想问了,我觉得,我觉得我不习惯使用参数,就是不想传递参数,代码管理哪里会出现不方便管理呢?好,这个问题问得相当的到位。
我来解释一下吧,如果在这个过程执行过程中,我们发现有不合理的地方,需要修改,例如,我还想伸个舌头啥的,我们就要在亲自己老婆的函数中修改(麻烦),还要在亲别人老婆的函数中修改(麻烦+1),当我们有很多个类似的函数的时候,是不是要全部做修改(麻烦+n);第二个坏处就是修改次数多了,你能保证一次性全部修改都不会出错吗(容易失误),这就能体现出了,如果我们只是完全写一些重复性的代码,工作效率大打折扣。
通过上面的讲解,其实新手读者们还是没能理解什么是OOP(面向对象编程),我们现在就从对象(object)开始讲解,这里的对象,不能单纯地理解成谈恋爱时所处的男女朋友,对象是指世间的万事万物,太阳,大海,人,宠物……;每一种我们可以想得到的事物,每一个对象都有自己的属性,行为。
我们就可以像上图这样来理解,鸟就是一个对象,它有自己属性,有自己的行为,下面我们就用具体代码来封装一个关于鸟的类。(注:在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();
现在我们就可以调用它的属性,以及方法了
通过这样的方法我们所得到的每一个鸽子其实都是一样的,我们要怎么才得到有自己特征的鸽子呢?有自己独有特征,其实就是属性不一样,那们我们就来改造一下函数的声明
//其实我们只需要在这里小小地修改一下
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克");
这样,我们就可以构造出有自己特征的鸽子出来了,从上面的例子,我们其实已经不难看出,封装,其实就是把我们可以形容的对象用类来表示,我们就可通过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();
如果我们要再声明100个鸽子,是不是要写大量重复类似上面这样的代码呀,这就是面向过程的代码。相信新手朋友们已经有一个模糊的OOP概念了吧,慢慢体会,这种感觉不一两天就能弄明白的,一口吃不成大胖子,后面我们还会继续讲OOP思想的继承和多态。
继续先前在声明Bird类的时候,说的属性和行为是同一级别,而且是可以用两种方式来声明,属性在构造函数里面用 this 关键字声明,行为函数用 prototype 关键字来声明,prototype就是函数原型链的标准扩展,我们之所以这样来写,就是把javascript语言的使用代入高级语言的范畴,用来模拟高级语言的使用,扯远了,我们先来验证一下Bird实例对象中是不是拥有在同一级别的属性跟行为函数
//我们现在是用的前面的没有参数的Bird类
var obj = new Bird(); //逐一打印出来
for(var pro in obj){
console.log(pro + " : " + obj[pro]);
}
看到了吧,for...in就作用就是用来循环遍历对象的属性以及数组的下标,行为函数的名称其实也是对象的属性,现在就验证了前面的说法,相信大家现在对OOP的封装思想有一定的认知了。
总结一下,今天我们所讲的东西其实就是把事物给抽象的拟态一下,然后,把这些属性行为给封装成一个类,使用new关键字实例化出具体对象,这样大大地提高了代码的使用率,提高了工作效率。
javascript大神修炼记(5)——OOP思想(封装)的更多相关文章
- javascript大神修炼记(1)——入门介绍
读者朋友们好,从今天开始,我将带领新朋友们,从了解javascript开始,一步一步地进阶到大神境界,别的不废话,现在开始,我们就一点一点地从入门阶段开始. 我们还是介绍一下javascript的身世 ...
- javascript大神修炼记(7)——OOP思想(多态)
读者朋友们大家好,今天我们就接着前面的内容讲,前面我们已经讲到了继承,今天我们就来讲OOP目前最后一个体现,那就是多态,因为javascript语言的灵活性,所以我们是没有办法使用接口的,所以这也给j ...
- javascript大神修炼记(6)——OOP思想(继承)
读者朋友们大家好,我们今天这一讲就接着前面的封装继续讲解,今天就是在前面内容上面的升级,OOP思想中的继承,我们就先来解释一下继承到底是什么意思,我们在什么地方会用到继续. 继承就是,后代继续祖先的一 ...
- javascript大神修炼记(2)——运算符
读者朋友们好,前面我已经大概的了解了Javascript的作用以及一些基本的函数声明与变量声明,今天我们就接着前面的内容讲解,我们就来看一下javscript的逻辑(正序,分支,循环)以及一些简单的运 ...
- javascript大神修炼记(4)——循环
读者朋友们大家好,今天,我们继续接着前面的内容讲,前们我们已经讲了条件分支,今天我们就讲循环,顾名思义就是,重复执行相同的操作,正常循环是受程序控制的,不正常的情况,就会出现死循环,那就是我们的代码中 ...
- javascript大神修炼记(3)——条件分支
读者朋友们好,我们今天接着前面的讲,前面已经大概了讲了一下运算符,今天的任务主要就是讲解逻辑条件分支,循环. 我们先就来模拟一个逻辑块,就用我们经常接触到的买车票来说吧,车票的价格对不同的人价格是有差 ...
- 兄台息怒,关于arguments,您的想法和大神是一样一样的----闲聊JS中的apply和call
JavaScript提供了apply和call两种调用方式来确定函数体中this的指向,表现出来的特征就是:对象可以'借用'其他对象的方法.之前的几篇博客回顾了一些Web控件的一些开发方法,我们聊了如 ...
- javascript闭包—围观大神如何解释闭包
闭包的概念已经出来很长时间了,网上资源一大把,本着拿来主意的方法来看看. 这一篇文章 学习Javascript闭包(Closure) 是大神阮一峰的博文,作者循序渐进,讲的很透彻.下面一一剖析. 1. ...
- 刚看完了一本关于javascript的书感觉受益匪浅,原来不懂的东西这么多,想问问怎么成为大神?求教!!!!!!
刚看完了一本关于javascript的书感觉受益匪浅,原来不懂的东西这么多,想问问怎么成为大神?求教!!!!!!
随机推荐
- 15ecjtu校赛1006 (dfs容斥)
Problem Description 在平面上有一个n*n的网格,即有n条平行于x轴的直线和n条平行于y轴的直线,形 成了n*n个交点(a,b)(1<=a<=n,1<=b<= ...
- udhcp server端源码分析1--文件组织结构
1:dhcpd.c udhcpd_main函数是整个程序的入口,依次完成的主要工作有读取配置文件信息至全局结构体.记录程序pid number.初始化lease链表.将程序作为daemon运行.死循环 ...
- jQuery对象初始化的传参方式
jQuery对象初始化的传参方式包括: 1.$(DOMElement) 2.$(' ... '), $('#id'), $('.class') 传入字符串, 这是最常见的形式, 这种传参数经常也传入第 ...
- mysql 高级应用
1.MySQL like 模糊查询 例如:select * from emp where name like '张%'; 2.1MySQL UNION 操作符 SELECT country FROM ...
- leaflet一个前端gis框架,比openlayer更简单
leaflet一个前端gis框架,比openlayer更简单 作者github:https://github.com/mourner?tab=overview&from=2009-12-01& ...
- android抽屉导航的设计准则
我阅读了google官方的关于抽屉导航的设计准则,这可以给我带来什么帮助?最起码,我可以知道,抽屉导航适用在什么场景中,使用它时要注意什么事项.App的设计是有规则可以依据的,比如,使用抽屉导航时,是 ...
- 【BZOJ】1635: [Usaco2007 Jan]Tallest Cow 最高的牛
[题意]n头牛,其中最高h.给定r组关系a和b,要求满足h[b]>=h[a]且a.b之间都小于min(h[a],h[b]),求第i头牛可能的最高高度. [算法]差分 [题解]容易发现r组关系只能 ...
- Hibernate数据连接不能正常释放的原因,以及在监听中获取apolicationContext上下文
Hibernate数据库连接不能正常释放: https://blog.csdn.net/u011644423/article/details/44267301 监听中获取applicationCont ...
- hibernate单列的多值查询
比如你的表主键是id,你要删除id 是 34,56,99 这样的.. uid是拼好的 比如 '34','56','99' ,以前我会这样写 String queryString = "upd ...
- el-date-picker 日期格式化 yyyy-MM-dd
<el-date-picker format="yyyy-MM-dd" v-model="dateValue" type="date" ...