HTML5学堂-码匠 HTML5学堂

您当前位于:JavaScript高级 ——> 面向对象系列-面向对象的基本含义、工厂模式是什么?

面向对象系列-面向对象的基本含义、工厂模式是什么?

2015/04/30 12:33:26 | 作者:HTML5学堂(码匠) | 分类:JavaScript高级 | 关键词:面向对象,工厂模式,对象

面向对象系列讲解—面向对象的含义&工厂模式

HTML5学堂:在上一篇文章当中,我们把对象进行了基本的解释,本文当中,我将为大家解释什么是面向对象?为何要使用面向对象,而不用面向过程,面向对象又有什么好处,能够帮我们做些什么?基本的面向对象的代码又应当如何书写?并依照以上的例子来讲解一下“工厂模式”。

面向对象的解释

对面向对象的解释如下:把数据及对数据的操作方法放在一起,作为一个相互依存的整体——对象。对同类对象抽象出其共性,形成类。类中的大多数数据,只能用本类的方法进行处理。类通过一个简单的外部接口与外界发生关系,对象与对象之间通过消息进行通信。

看不懂?没关系,且听我稍微解释一下。其实,在我们生活中,有很多面向对象的例子,比如我们使用的电脑,我们借助什么来给计算机传递信息,又借助什么看到计算机是否执行了自己想要的操作?——很明显,采用键盘和鼠标(还有话筒等)给计算机传入信息,然后计算机通过电脑屏幕给我们呈现出信息出来。至于我们按下键盘之后,计算机是如何识别的,如何转化成二进制数值进行运算,又是如何运算,然后什么二极管是如何传递信息,电子屏又是如何构成的,我们并不清楚,也不必清楚。那么这个电脑就称之为一个对象,我们并不需要了解它内部的运行机制,只需要了解如何操作它(键盘、鼠标)——即所谓的外部接口。知道它会给我们传递出什么就可以了。

不知道上面的例子有没有解释清楚,再举一个电视的例子,我们只需要知道按下遥控器的哪个键能够做什么就足够了,至于电视机是如何实现的这个功能我们不需要了解。这个遥控器就相当于我们能够操作电视机这个“对象”的“接口”。

为何要使用面向对象

面向对象的好处是什么呢?在我们的代码开发当中,对于一些功能,可能在某些网页当中是重复出现的,那么此时,我们完全可以把这部分功能封装成一个对象,然后在多个地方进行调用,而不是每次遇到它的时候都重新书写一次。

大概能够明白了吧?其实,是我们实在是不希望复制粘贴,太麻烦了。而且复制粘贴的话,一个网页中代码量会“暴涨”,网页读取加载速度自然就慢了,那用户对着空白的屏幕要等待更长的时间,这种情况下,还有谁来看我们的网页呢?所以,从开发者到用户再到我们的公司,采用面向对象的编程方式都是有好处且有必要的。

面向对象代码实例:话不多说,我们来写一个实际的面向对象的例子。先来回顾一下我们上篇文章中的那段代码:

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>面向对象-独行冰海</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         var obj = {};
  10.         obj.username = '独行冰海';
  11.         obj.blogsrc = 'http://blog.163.com/hongshaoguoguo@126';
  12.         obj.weibo = 'http://weibo.com/u/2706684357';
  13.         obj.showInf = function (){
  14.          alert('姓名:'+obj.username+'\n博客地址:'+obj.blogsrc+'\n微博地址:'+obj.weibo);
  15.         }
  16.         obj.showInf();
  17.     </script>
  18. </body>
  19. </html>

我们会发现这个代码不能够通用,很不好,如果我希望创建另一个人的基本信息,还需要新建,那么我们利用参数,对函数进行修改。

 

欢迎沟通交流~HTML5学堂

修改后的代码如下:

 

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>面向对象-独行冰海</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         function createPerson(username, blogsrc, weibo){
  10.             var user = new Object();
  11.             user.username = username;
  12.             user.blogsrc = blogsrc;
  13.             user.weibo = weibo;
  14.             user.showInf = function (){
  15.                 alert('姓名:'+this.username+'\n博客地址:'+this.blogsrc+'\n微博地址:'+this.weibo);
  16.             }
  17.             return user;
  18.         }
  19.         var user1 = createPerson('独行冰海', 'http://blog.163.com/hongshaoguoguo@126', 'http://weibo.com/u/2706684357');
  20.         user1.showInf();
  21.     </script>
  22. </body>
  23. </html>

来说说这段代码修改了什么地方:

1、将需要呈现的基本信息作为参数传递到函数当中,而不是单独创建变量;

2、添加了return的功能,这处是在执行之后返回user这个对象;

3、obj的定义采用了new Object(); 用于实例化一个对象;

4、alert中的obj.username等修改为this.username,关于this,这里this指向的就是obj,因此可以使用this对其进行替换,在此这个地方不再做详细的解释了,如果不是很清楚this指向的话,可以参见日志《this 的使用方法 —— javascript中的this讲解!》《this的使用方法,补充讲解 —— javascript中的this讲解》;

5、考虑代码阅读性方面的问题,修改了obj的命名为user。

将代码写到此,我们实际上就已经实现了工厂方式的构造方法。

什么是工厂模式

先来解释一下工厂模式。工厂是什么概念呢?很简单。工厂模式需要三个基本步骤,原料投入、加工过程以及成品出厂。 来看一下这段代码当中,var user = new Object(); 以及 函数中传递的参数就是“基本原料的投入”;具体从user.username一直到return之前,都属于“加工过程”;最后的return就如同“成品出厂”。

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>面向对象-独行冰海</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         function createPerson(username, blogsrc, weibo){
  10.             // 原料的投入
  11.             var user = new Object();
  12.             // 加工过程的开始
  13.             user.username = username;
  14.             user.blogsrc = blogsrc;
  15.             user.weibo = weibo;
  16.             user.showInf = function (){
  17.              alert('姓名:'+this.username+'\n博客地址:'+this.blogsrc+'\n微博地址:'+this.weibo);
  18.             }
  19.             // 加工过程的结束
  20.             // 成品出厂
  21.             return user;
  22.         }
  23.         var user1 = createPerson('独行冰海', 'http://blog.163.com/hongshaoguoguo@126', 'http://weibo.com/u/2706684357');
  24.         user1.showInf();
  25.     </script>
  26. </body>
  27. </html>

接下来说说工厂方式的缺陷:

1、没有new,也就是没有构造函数实例化的过程——其实也就是语义性不是很好;

2、对于此种构建,会为每个实例化的对象都创建相应的变量和函数。也就是,创建了多个空间进行属性和方法的存储。从而降低了性能,产生资源浪费。

来解释一下第二个缺陷是什么意思。在createPerson这个函数之后的内容修改为如下代码:

  1. var user1 = createPerson('独行冰海', 'http://blog.163.com/hongshaoguoguo@126', 'http://weibo.com/u/2706684357');
  2. console.log(user1.showInf);
  3. var user2 = createPerson('独行冰海', 'http://blog.163.com/hongshaoguoguo@126', 'http://weibo.com/u/2706684357');
  4. console.log(user2.showInf);
  5. console.log(user1.showInf == user2.showInf);

在谷歌控制台当中打印出的内容如下:
HTML5学堂 面向对象系列讲解—面向对象的含义&工厂模式

能够看出来,打印出的两个函数内容完全相同,但是比较之后却返回的是false

可见,使用工厂方式创建的对象,在调用的时候会创建多个属性和方法。当创建的对象比较多的时候,会在空间中创建多个空间进行存储,从而造成了资源浪费。

那么如何解决这种问题呢?我们可以采用混合模式的书写方法,使用new去解决这种工厂模式的缺陷,利用原型解决“方法”的重复创建,这种方法也是最为常用的方法。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端