JavaScript面向对象轻松入门之概述(demo by ES5ES6TypeScript)

Posted 2020-09-21

写在前面的话

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

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

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

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

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

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

什么是面向对象(OOP)？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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一起看。

后话

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

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