写在前面的话

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

后话

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

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

JavaScript面向对象轻松入门之概述(demo by ES5、ES6、TypeScript)的更多相关文章

  1. JavaScript面向对象轻松入门之封装(demo by ES5、ES6、TypeScript)

    本章默认大家已经看过作者的前一篇文章 <JavaScript面向对象轻松入门之抽象> 为什么要封装? 封装(Encapsulation)就是把对象的内部属性和方法隐藏起来,外部代码访问该对 ...

  2. JavaScript面向对象轻松入门之多态(demo by ES5、ES6、TypeScript)

    多态(Polymorphism)按字面的意思就是"多种状态",同样的行为(方法)在不同对象上有不同的状态. 在OOP中很多地方都要用到多态的特性,比如同样是点击鼠标右键,点击快捷方 ...

  3. JavaScript面向对象轻松入门之继承(demo by ES5、ES6)

    继承是面向对象很重要的一个概念,分为接口继承和实现继承,接口继承即为继承某个对象的方法,实现继承即为继承某个对象的属性.JavvaScript通过原型链来实现接口继承.call()或apply()来实 ...

  4. JavaScript面向对象轻松入门之抽象(demo by ES5、ES6、TypeScript)

    抽象的概念 狭义的抽象,也就是代码里的抽象,就是把一些相关联的业务逻辑分离成属性和方法(行为),这些属性和方法就可以构成一个对象. 这种抽象是为了把难以理解的代码归纳成与现实世界关联的概念,比如小狗这 ...

  5. JavaScript面向对象轻松入门之综合

    javascrpit面向对象之综合   这一章是对前几章的一个总结,通过一个案例来综合认识javascript面向对象的基本用法   需求: 几乎所有的web应用都需要保存数据一些到本地,那么我们就来 ...

  6. JavaScript面向对象编程入门

    来源极客网 function Person() { var _this = {} //创建一个空的对象,接着我们利用这个"空的对象"承载Person的属性和方法 _this.say ...

  7. JavaScript面向对象旅程(下)

    JavaScript面向对象旅程 剪不断,理还乱,是离愁. 前面已经提到过新语言开发的两个步骤,分别是:一.定义基本的数据类型,完善结构化编程语言的设计:二.为函数类型绑定this的概念,好在对象的方 ...

  8. (二)我的JavaScript系列:JavaScript面向对象旅程(下)

    剪不断,理还乱,是离愁. 前面已经提到过新语言开发的两个步骤,分别是:一.定义基本的数据类型,完善结构化编程语言的设计:二.为函数类型绑定this的概念,好在对象的方法中可以引用到对象自身.下面是继续 ...

  9. Swift轻松入门——基本语法介绍和详细地Demo讲解(利用WebView打开百度、新浪等网页)

    转载请务必注明出处(all copyright reserved by iOSGeek) 本文主要分为两个部分,第一部分介绍Swift的基本语法,第二部分讲解一个利用WebView来打开百度.sina ...

随机推荐

  1. Java多机部署下的定时任务处理方案(mysql)

    因为自己有csdn和博客园两个博客, 所以两边都会发一下. csdn地址: http://blog.csdn.net/u012881584/article/details/70194237 今天来说一 ...

  2. 图文详解linux如何搭建lamp服务环境

    企业网站建设必然离不开服务器运维,一个稳定高效的服务器环境是保证网站正常运行的重要前提.本文小编将会详细讲解Linux系统上如何搭建配置高效的lamp服务环境,并在lamp环境中搭建起企业自己的网站. ...

  3. juery悬浮框

    现在的淘宝啊,京东啊等很多平台都用到了一个技术,就是当页面下拉时,某个div会一直悬浮在页面顶端.具体代码如下<p>jQuery实现页面滚动时层智能浮动定位</p><!D ...

  4. lua 数据类型

    lua 数据类型 8 种数据类型 类型 说明 nil 空类型 boolean 布尔类型 number 数值型, 浮点型 string 字符串 function 函数 userdata 用户自定义结构 ...

  5. 统计学习方法:罗杰斯特回归及Tensorflow入门

    作者:桂. 时间:2017-04-21  21:11:23 链接:http://www.cnblogs.com/xingshansi/p/6743780.html 前言 看到最近大家都在用Tensor ...

  6. 各种API总结大全 JAVA、HTML、HTML5等等

    本文章,发现新的API会进行更新,如果你们觉得有新的版本或者拥有新的,也可以发有邮箱到"zenglei8732@163.com"当中,本人会在12小时内更新,非常感谢!!! HTM ...

  7. windows和linux双系统修改启动项

    在windows系统的基础上再装linux系统的时候,电脑启动就会出现linux的启动引导项,默认的是进入linux.要使电脑默认进入windows只需要修改linux系统的启动引导文件(grub.c ...

  8. C语言学习第二章

    今天开始学习常量,变量,基本数据类型,printf()函数和scanf()函数,算术运算符. 首先常量:是在程序中保持不变的量 变量:编写程序时,常常需要将数据存储在内存中,方便后面使用这个数据或者修 ...

  9. 如何自建appender扩展Log4j框架

    1.log4j 概述 log4j 环境包括三个主要组件: logger(日志记录器):控制要启用或禁用哪些日志记录语句.可以对日志记录器指定如下级别: ALL . DEBUG . INFO . WAR ...

  10. TypeScript基本知识(为学习AngularJS2框架做个小铺垫)

    学习angularjs2框架,需要了解一些TypeScript知识点,基本了解下面这几个知识点学习AngularJS2 就够用了 1.TypeScript 1.1显示类型的定义 TypeScript类 ...