JavaScript面向对象轻松入门之概述(demo by ES5、ES6、TypeScript)

写在前面的话

  这是一个JavaScript面向对象系列的文章,本篇文章主要讲概述,介绍面向对象,后面计划还会有5篇文章,讲抽象、封装、继承、多态,最后再来一个综合。

  说实话,写JavaScript面向对象的文章实在是太多了,网上一搜一大堆,很多书里面也介绍的很详细。但作者当初在学习面向对象的时候还是非常困难,特别是在习惯了面向过程编程的情况下,不知道大家有没有这个感受。

  作者分析了一下其中的原因,恐怕是因为里面涉及的概念太多:原型、原型链、继承、thisconstructorcall等等,这些都是要了解的。一介绍起来就像是拔出萝卜带出一大堆泥,知识点之间耦合度太高,一点都不符合面向对象封装的特点。

  所以作者在这一系列的文章中不准备介绍上面的这些概念,只会说这些东西在这里有什么用。作者会假定读者对这些概念一无所知,并且也不奢求读者读完这些文章后就对面向对象有非常深入的了解。

  这一系列的文章的定位就是quickstart,介绍JavaScript面向对象最常用的东西,让读者读完之后就能立马上手,仿照里面的demo写出面向对象风格的代码,等用的多了再回头去深入学习其中的原理,我相信这时候会容易的多。

  想了解更多?抱歉,看书去吧,《JavaScript高级程序设计》《JavaScript权威指南》里面讲的比作者详细多了,单继承方式《JavaScript高级程序设计》中就讲了5种。

什么是面向对象(OOP)

  在作者看来,狭义的面向对象是一种编程方式,采用了抽象、封装、继承、多态这些设计方法,把难以读懂的代码抽象成一个个对象,增强代码的可读性、可靠性、可拓展性,是人们对编程经验的总结。

  推及到广义上,面向对象已经越了程序设计和软件开发作者认为面向对象又是一种思维方式,不局限于编程语言,甚至不局限编程本身,它把复杂的需求、业务逻辑抽丝剥茧、逐个分析。

  这一系列的文章作者会尝试用一些面向对象的思想去写,是不是很酷?

为什么要用面向对象这种编程方式?

  最初没有面向对象这个概念的时候,人们是按照计算机思维去写代码的(又叫面向过程,汇编和C一般是用这种方式),但是人理解计算机思维是比较困难的,代码量越多后期就越难维护,于是人们发明了面向对象这种编程方式,所以衍生出了许多面向对象的高级语言C++C#java等等,我们前端工程师使用的JavaScript也是其中的一种。

面向对象有以下这些好处:

  1、可读性强。如果你使用面向过程的方式编程,你可能过两三个月就忘了你的代码表达的意思,更别说让其他人理解你的代码。面向对象可以让你的代码遵循一定的规范,不论是你自己还是团队其他人理解起你的代码来更容易,非常方便多人协同开发。

  2、可扩展性强。面向对象强调代码的封装性,降低代码模块间的耦合度,这大大增强了代码的灵活性、可扩展性。

  3、复用代码。面向对象可把业务逻辑抽象拆分成一个个对象,比如猫和狗都可以把尾巴抽象成一个对象,猫和狗就都可以用尾巴这个对象。

  4、易维护。由于程序被抽象成一个个对象,那么即时是改变需求,只需要修改对应的对象就可以了,所以维护起来非常方便。

如果你编程有一段时间了,那你一定听说过大名鼎鼎的“设计模式”,面向对象就是设计模式的基础(可以理解为“前置技能”)。

在前端领域什么时候适合用面向对象?

  说实话前端领域使用面向对象编程的人不多,主要原因是因为很多WEB程序比较简单,用面向过程的编程方式足够满足需求,人们只是用JavaScript写写网页特效,提交个表单什么的。但随着互联网的发展,各种基于WEB的复杂需求不断出现,WEB程序越来越复杂,一个SPAsingle page web application单页Web应用)可能有几十万甚至上百万行代码,需要多人来开发、维护。

当你有以下这些感受的时候,这说明你应该学习面向对象了。

  1、项目的代码越来越多,感觉越来越难以维护;

  2、项目中好多需求很类似,一些代码主体上感觉差不多;

  3、需要和别人协同开发,别人有可能会改你的代码,你也可能改别人的代码,并且感觉沟通的很麻烦;

  4、两个月没看的代码就感觉不是自己写的了;

  5、程序经常出bug,并需要花很长时间去找原因;

  6、产品经理说“这个需求得改一下”的时候,内心一万个草泥马跑过;

  7、技术增长陷入了瓶颈。

JavaScript的面向对象

  我相信javac++等语言的初学者学习面向对象肯定没有JavaScript这么难,因为这些面向对象语言已经将面向对象融入了语法,语法强制你去按照面向对象的方式编程,即使你不知道为什么这样做。

  JavaScript是通过模拟来实现面向对象的,这是很让人诟病的地方,理解困难,写起来比较麻烦,代码不干净。

  当然,并不是说JavaScript不如这些语言,JavaScript的灵活性是这些语言无法比拟的,这就让它有更多的可能,可以模拟很多编程语言的特性,JavaScript成为使用比例最高的编程语言是有理由的。

  而且并不是所有需求都必须用面向对象去解决,很多需求(特别是WEB程序)直接用面向过程去解决或许更方便,更快捷。

为什么要用ES5ES6TypeScriptdemo

  先介绍一下这三个概念:

ES5

  全名ECMAScript5,可以理解为我们常规意义上的JavaScript(实际上JavaScript还包含了DOMBOM),是目前大部分浏览器都支持的JavaScript语法特性,在ES5之前还有ES3

ES6

  是2015年制定的ECMAScript语言规范,在ES5的基础上扩充了新的语法特性,代表着JavaScript的未来,但还没有被大部分浏览器兼容,可以用babel等工具转化为ES5

TypeScript

  TypeScriptES5ES6的基础上又增加了类型检测等新特性,跟java很像,同时又保留了JavaScript的灵活性,非常适合大型应用程序。TypeScript不是ES5ES6这种官方产物,不被浏览器支持,需要用官方的工具转化为ES5ES6。因为angular2是用TypeScript写的,这让TypeScript最近大火,作者也是因为要用angular2做项目接触的TypeScript(偷偷告诉大家:TypeScript写起代码来非常爽)。

ES5->ES6->TypeScript面向对象的演化:

  从ES5ES6TypeScript,面向对象的味道越来越浓。ES5里面向对象靠模拟;ES6已经有class这个概念了,但还不够完善;TypeScript更是将面向对象推向了极致,这方面已经不比java差了。所以作者把这三者放在一起来对比、印证。

  新手可以只看ES5部分,学习有余力的和老鸟们可以把三部分demo一起看。

后话

  这一系列后面的文章(抽象、封装、继承、多态、综合),作者尽量一周写一篇,各位看官如果觉得文章还行,不妨收藏起来,等作者更新了就可以第一时间阅读。

  如果大家觉得有什么需要补充、修改的,欢迎私信或留言。

posted on 2017-06-04 10:01 elonhu 阅读(...) 评论(...) 编辑 收藏

导航

公告