千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-654-7778
当前位置:首页 > 技术交流专区  >  正文

HTML5技术分享 面向对象概念的理解以及ES3和ES6中类的写法

时间:2017-11-09 10:40:20     来源:千锋教育 作者:HTML5讲师

  本文将从以下四个方面进行讲解:

  1、 面向对象的概念

  2、 类和对象的概念

  3、 ES6中类的写法

  4、 ES3中“类”的写法

  以下为详细内容:

  1、 面向对象的概念

  面向对象,IT行业的地球人都知道很重要,很难理解,对于很多做过好几年开发的人不见得对面向对象完全理解。面向对象编程是一种编程思想,是基本沿用人类习惯性思维的一种编程思想。ps:我给学生讲课时,经常问学生“编程为了什么”,学生说挣钱,为了好的生活,我让学生提高一下高度,后就提升到了“为人民(类)服务”了(哈哈),此话不假。因为,编程就是要做信息化的事情,而信息化就是信息化整个社会,即把人类社会的各行各业都进行信息化,也就是为人类服务了。那么,既然要为人类服务,解决人类社会的问题,那么,是不是该用人类的思维才对呀。

  我来分享一下我对面向对象的理解。

  比如,我们要创办一个公司(资金已经到位)。会按照以下步骤:

  首先,我们需要考虑的是,创办公司需要哪些角色,如:总经理,市场人员,技术,售后,财务,行政,进一步细化,总经理的要求有:性别,年龄,经验,总经理要负责公司的正常经营和利润的等等。市场人员的要求:性别,年龄,经验,市场人员要负责公司市场的拓展和业务的等等。技术人员的要求:性别,年龄,经验,能够胜任技术方面的相关工作,如:要会用原生的JS写插件,技术人员负责完成客户的需求等等,这些都是对公司角色的描述,在面向对象编程思想中,就是类,当然Javascript是从ES6开始才提出了类的概念,以前的版本没有类的概念,只有对象之说。

  其次,我们会想到,工作该如何开展。如:先得有总经理,然后让总经理招聘市场人员了解市场,开拓市场,再招聘技术人员开发产品,产品快要成型时,招聘售后人员了解产品,准备售后的服务工作,财务人员也得跟上,这里面,也有团队配合的体现,比如,市场人员没法给客户讲清楚具体的实现时,就需要技术人员配合市场人员给客户讲解等等。当然,每个公司的具体流程不太一样,但是,都是同样的道理。这些就是程序中的业务逻辑部分。

  比如,我们要创办一个培训学校,会按照以下步骤:

  首先,我们需要考虑的是,创办学校需要哪些角色,如:校长,市场人员,咨询人员,讲师,班主任,老师,财务,行政等等。校长的要求:需要具备什么,能干什么;市场人员的要求:有什么,能干什么;讲师的要求:有什么,能干什么;等等,这些都是对公司角色的描述,在面向对象编程思想中,就是类,而“有什么”就是类的属性(变量),“能干什么”就是类的方法(函数)。

  其次,我们会想到,工作该如何开展,即工作流程。如:让市场人员先做宣传,学生如果想进一步了解,就需要咨询师进行咨询,咨询完成后,学生觉得学习JS确实不错,就会报名进班,财务处收学费,班主任建立学生的学籍,进行班级日常管理,讲师开始授课,解答学生的问题,学习完成后,老师把学生推荐给企业,这里也能体现团队配合,如:学生咨询过程中,问到了比较深的技术问题,咨询师解答不了,就需要找讲师配合等等。在面向对象编程思想中这就是大的业务逻辑,即程序逻辑。

  再比如,我们要完成讲课这件事情,首先需要考虑,必须有桌椅板凳,电脑,投影仪,讲师,学生等等,其次考虑,先买桌椅板凳,电脑,投影仪,学生进教室,讲师进教室开始讲课。

  在面向对象编程思想出来之前,我们多用的是面向过程的编程思想。

  面向过程的编程思想和面向对象的编程思想有何区别。面向过程首先着重考虑的是程序逻辑,其次考虑的是数据。而面向对象首先着重考虑的是数据(类和对象),其次考虑的是逻辑(即业务逻辑)。

  单干与团队协作:面向过程程序的执行过程,像是单干;面向对象程序的执行过程,像是现实生活中的团队协作。所以,我们在描述面向过程程序的逻辑时,没有主语(语文的解释),如:先干啥,再干啥,然后干啥,后干啥。而描述面向对象的逻辑时,有主语,如:谁先干啥,谁再干啥,然后谁干啥,后谁干啥。

  面向对象思想的核心就是一切皆对象,完成任何功能,面对的小单位都是对象,而不是基本数据类型(如:数字,布尔等等)。

  2、 类和对象

  类和对象:在面向对象编程语言中,经常会听到类和对象。类就是分类,就是类型,就是数据类型;对象就是类的举例,类的实例,就是变量或者常量。如:数字是数据类型,而250就是数字类型的一个例子;人是数据类型(类),唐僧就是人的一个例子(对象)。

  对象就是复杂的数据,如:人没法用数字,布尔等基本类型描述,人是一个复杂的事物,由很多数据构成。一个人有身份证号码,姓名,性别,年龄,把这一切组合(封装)起来才是个人,人由若干个基本类型的数据组成。但这远远还不够,因为死人也具备这些属性(开个玩笑,为艺术献身一下),人能吃饭,能工作,此时,这个人才活灵活现了,所以,对象里面包括数据和函数;数据又叫属性,成员变量,函数又叫方法。在面向对象的世界里,习惯上会叫属性和方法,简单理解:对象=变量+函数。

  综上所述,面向对象是一种编程思想,而对象是复杂的数据类型,所以,面向对象就是,面对的都是复杂的数据类型,而不是单一的整型,布尔等基本类型,对象是由若干个基本类型的数据构成,甚至对象里还有子对象,当然还有方法。

  注:以上所述的类和对象是ES6中的名词

  3、 ES6中类和对象的代码

  1)、定义一个程序员类:

  class Programmer{

  //构造函数

  constructor(name,sex,age){

  //属性

  this.name = name;

  this.sex = sex;

  this.age = age;

  }

  //方法

  writeCode(str){

  alert(this.name+”在认真地写着”+str);

  }

  }

  2)、实例化一个程序员对象:

  Let p1 = new Programmer(“宝宝”, “男”,25);//这句话会调用constructor ()函数

  p1.writeCode(“贪吃蛇”);

  以上代码,和传统面向对象编程语言的写法比较接近。对程序员来说,是福音。Javascript的代码格式越来越接近传统面向对象编程语言的写法。

  4、 ES3中“类”的写法

  1)、区分一个ES3和ES6的名词:

  ES3中没有类的叫法。

  ES3中的对象就是ES6中的类。

  ES3中的实例就是ES6中的对象。

  2)、ES3中的的代码

  用构造函数的方式定义一个程序员对象(ES6中叫类):

  function Programmer (name,sex,age){

  //属性

  this.name = name;

  this.sex = sex;

  this.age = age;

  }

  //方法

  Programmer .prototype.writeCode(str){

  alert(this.name+”在认真地写着”+str);

  }

  l 实例化一个程序员实例(ES6中叫对象):

  Let p1 = new Programmer(“宝宝”, “男”,25);//这句话会调用constructor ()函数

  p1.writeCode(“贪吃蛇”);

  对比ES6和ES3的写法,你会发现,实例化对象的代码一模一样,仅仅只是定义类的写法不同。其实,ES6中class的写法只是个语法糖,相当于给ES3的写法上增加了给一个外包装。ES6中class写法的背后还是ES3的写法。只是程序员写ES6的代码时,加接近传统面向对象编程语言(如:java,C++等)。这样对于程序员来说,再去学习新的语言要容易得多;另外,ES6的class写法加方便阅读。

  注:此篇文章的重点是理解面向对象编程思想。

相关文章

无相关信息
  • 北京天丰利校区(总部):北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术广场服务楼2层、南区服务楼2层
    咨询电话:400-654-7778 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE培训、大数据开发培训、VR/AR混
                     合现实培训、Python培训、Android培训、iOS培训、好程序员
  • 深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷A区B座605-619
    深圳大学城校区:深圳市南山区留仙大道1201号大学城创客小镇16栋2楼、3楼
    咨询电话:0755-33582485-801(硅谷校区)0755-86660670-801(大学城校区)
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE培训、Android培训、iOS培训
  • 上海地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-627-7899 021-56166283/56166279
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE培训、Android课程培训、iOS课程培训、好程序员
  • 郑州地址:郑州市金水区纬五路21号河南教育综合楼(经纬中学楼)7/8层
    咨询电话:0371-55191750 400-654-7778
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE培训、Android课程培训、iOS课程培训
  • 广州地址:广州市天河区元岗路310号智汇park创意园E座5层
    咨询电话:020-22119207 400-654-7778
    面授课程:全栈HTML5+培训、JavaEE培训、Android课程培训、iOS课程培训
  • 大连地址:辽宁省大连市甘井子区软件园路2号东软信息B8座2层
    咨询电话:0411-39026086 400-654-7778
    面授课程:全栈HTML5+培训、JavaEE培训、UI交互设计培训、Android课程培训、iOS课程培训
  • 武汉地址:武汉市光谷大道61号智慧园21号楼2层
    咨询电话:027-65523826
    面授课程:全栈HTML5+培训、JavaEE培训、Android课程培训、iOS课程培训
  • 成都地址:成都市武侯区科华北路62号力宝大厦N(北楼)18楼
    咨询电话:028-83178771
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE培训、Android课程培训、iOS课程培训
  • 校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85260160
    面授课程:全栈HTML5+培训、JavaEE培训、Android课程培训
  • 杭州地址:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:0571-86893632 010-82790226-801
    面授课程:全栈HTML5+培训、JavaEE培训、Android课程培训、iOS课程培训
  • 青岛校区地址:青岛市市南区金坛路17号青岛职业技术南校区实训楼A4层
    咨询电话:0532-80910752/3 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、Android课程培训、iOS课程培训
  • 了解千锋动态
    关注千锋教育服务号

  • 扫码匿名提建议
    直达CEO信箱