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

时间:2022-01-22 22:29:28

写在前面的话

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

后话

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

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