JavaScript面向对象轻松入门之概述(demo by ES五、ES六、TypeScript)

写在前面的话

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

　　说实话，写JavaScript面向对象的文章实在是太多了，网上一搜一大堆，不少书里面也介绍的很详细。但做者当初在学习面向对象的时候仍是很是困难，特别是在习惯了面向过程编程的状况下，不知道你们有没有这个感觉。

　　做者分析了一下其中的缘由，恐怕是由于里面涉及的概念太多：原型、原型链、继承、this、constructor、call等等，这些都是要了解的。一介绍起来就像是拔出萝卜带出一大堆泥，知识点之间耦合度过高，一点都不符合面向对象封装的特色。

　　因此做者在这一系列的文章中不许备介绍上面的这些概念，只会说这些东西在这里有什么用。做者会假定读者对这些概念一无所知，而且也不奢求读者读完这些文章后就对面向对象有很是深刻的了解。

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

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

什么是面向对象(OOP)？

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

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

　　这一系列的文章做者会尝试用一些面向对象的思想去写，是否是很酷？

为何要用面向对象这种编程方式？

　　最初没有面向对象这个概念的时候，人们是按照计算机思惟去写代码的（又叫面向过程，汇编和C通常是用这种方式），可是人理解计算机思惟是比较困难的，代码量越多后期就越难维护，因而人们发明了面向对象这种编程方式，因此衍生出了许多面向对象的高级语言C++、C#、java等等，咱们前端工程师使用的JavaScript也是其中的一种。

面向对象有如下这些好处：

　　一、可读性强。若是你使用面向过程的方式编程，你可能过两三个月就忘了你的代码表达的意思，更别说让其余人理解你的代码。面向对象可让你的代码遵循必定的规范，不管是你本身仍是团队其余人理解起你的代码来更容易，很是方便多人协同开发。

　　二、可扩展性强。面向对象强调代码的封装性，下降代码模块间的耦合度，这大大加强了代码的灵活性、可扩展性。

　　三、复用代码。面向对象可把业务逻辑抽象拆分红一个个对象，好比猫和狗均可以把尾巴抽象成一个对象，猫和狗就均可以用尾巴这个对象。

　　四、易维护。因为程序被抽象成一个个对象，那么即时是改变需求，只须要修改对应的对象就能够了，因此维护起来很是方便。

若是你编程有一段时间了，那你必定据说过大名鼎鼎的“设计模式”，面向对象就是设计模式的基础（能够理解为“前置技能”）。

在前端领域何时适合用面向对象？

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

当你有如下这些感觉的时候，这说明你应该学习面向对象了。

　　一、项目的代码愈来愈多，感受愈来愈难以维护；

　　二、项目中好多需求很相似，一些代码主体上感受差很少；

　　三、须要和别人协同开发，别人有可能会改你的代码，你也可能改别人的代码，而且感受沟通的很麻烦；

　　四、两个月没看的代码就感受不是本身写的了；

　　五、程序常常出bug，并须要花很长时间去找缘由；

　　六、产品经理说“这个需求得改一下”的时候，心里一万个草泥马跑过；

　　七、技术增加陷入了瓶颈。

JavaScript的面向对象

　　我相信java、c++等语言的初学者学习面向对象确定没有JavaScript这么难，由于这些面向对象语言已经将面向对象融入了语法，语法强制你去按照面向对象的方式编程，即便你不知道为何这样作。

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

　　固然，并非说JavaScript不如这些语言，JavaScript的灵活性是这些语言没法比拟的，这就让它有更多的可能，能够模拟不少编程语言的特性，JavaScript成为使用比例最高的编程语言是有理由的。

　　并且并非全部需求都必须用面向对象去解决，不少需求（特别是WEB程序）直接用面向过程去解决或许更方便，更快捷。

为何要用ES5、ES6、TypeScript来demo？

　　先介绍一下这三个概念：

ES5：

　　全名ECMAScript5，能够理解为咱们常规意义上的JavaScript（实际上JavaScript还包含了DOM和BOM），是目前大部分浏览器都支持的JavaScript语法特性，在ES5以前还有ES3。

ES6：

　　是2015年制定的ECMAScript语言规范，在ES5的基础上扩充了新的语法特性，表明着JavaScript的将来，但尚未被大部分浏览器兼容，能够用babel等工具转化为ES5。

TypeScript：

　　TypeScript在ES5、ES6的基础上又增长了类型检测等新特性，跟java很像，同时又保留了JavaScript的灵活性，很是适合大型应用程序。TypeScript不是ES5、ES6这种官方产物，不被浏览器支持，须要用官方的工具转化为ES5、ES6。由于angular2是用TypeScript写的，这让TypeScript最近大火，做者也是由于要用angular2作项目接触的TypeScript（偷偷告诉你们：TypeScript写起代码来很是爽）。

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

　　从ES5到ES6到TypeScript，面向对象的味道愈来愈浓。ES5里面向对象靠模拟；ES6已经有class这个概念了，但还不够完善；TypeScript更是将面向对象推向了极致，这方面已经不比java差了。因此做者把这三者放在一块儿来对比、印证。

　　新手能够只看ES5部分，学习有余力的和老鸟们能够把三部分demo一块儿看。

后话

　　这一系列后面的文章（抽象、封装、继承、多态、综合），做者尽可能一周写一篇，各位看官若是以为文章还行，不妨收藏起来，等做者更新了就能够第一时间阅读。

　　若是你们以为有什么须要补充、修改的，欢迎私信或留言。