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

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

面向对象的解释

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

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

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

为何要使用面向对象

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

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

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

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>面向对象-独行冰海</title>
</head>
<body>
    <script>
        var obj = {};
        obj.username = '独行冰海';
        obj.blogsrc = 'http://blog.163.com/hongshaoguoguo@126';
        obj.weibo = 'http://weibo.com/u/2706684357';
        obj.showInf = function (){
         alert('姓名:'+obj.username+'\n博客地址:'+obj.blogsrc+'\n微博地址:'+obj.weibo);
        }
        obj.showInf();
    </script>
</body>
</html>

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

修改后的代码如下:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>面向对象-独行冰海</title>
</head>
<body>
    <script>
        function createPerson(username, blogsrc, weibo){
            var user = new Object();
            user.username = username;
            user.blogsrc = blogsrc;
            user.weibo = weibo;
            user.showInf = function (){
                alert('姓名:'+this.username+'\n博客地址:'+this.blogsrc+'\n微博地址:'+this.weibo);
            }
            return user;
        }
        var user1 = createPerson('独行冰海', 'http://blog.163.com/hongshaoguoguo@126', 'http://weibo.com/u/2706684357');
        user1.showInf();
    </script>
</body>
</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就如同“成品出厂”。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>面向对象-独行冰海</title>
</head>
<body>
    <script>
        function createPerson(username, blogsrc, weibo){
            // 原料的投入
            var user = new Object();
            // 加工过程的开始
            user.username = username;
            user.blogsrc = blogsrc;
            user.weibo = weibo;
            user.showInf = function (){
             alert('姓名:'+this.username+'\n博客地址:'+this.blogsrc+'\n微博地址:'+this.weibo);
            }
            // 加工过程的结束
            // 成品出厂
            return user;
        }
        var user1 = createPerson('独行冰海', 'http://blog.163.com/hongshaoguoguo@126', 'http://weibo.com/u/2706684357');
        user1.showInf();
    </script>
</body>
</html>

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

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

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

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

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

在谷歌控制台当中打印出的内容如下:

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

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

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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-02-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏代码世界

计算机基础,Python基础--变量以及简单的循环

一、计算机基础 1.CPU   相当于人体的大脑,用于计算处理数据。 2.内存    用于存储数据,CPU从内存调用数据处理计算,运算速度很快。 PS:问:...

2807
来自专栏守候书阁

重构 - 保持函数的单一职责

上篇文章写了添加扩展性方面的重构,讲到了开放封闭原则。学习的步伐不能就此停止,今天的文章,将会提及开发的另一个原则:单一职责原则。通俗点说就是一个函数只做一件事...

40715
来自专栏xingoo, 一个梦想做发明家的程序员

【AngularJS】—— 1 初识AngularJs

怀着激动与忐忑的心情,开始了学习AngularJS的旅程,很久之前就听说了这个前端框架,但是由于自己一直没有从事相关的工作,因此也没有进行学习。这次正好学习...

1899
来自专栏Pythonista

封装-python

    从封装本身的意思去理解,封装就好像是拿来一个麻袋,把小猫,小狗,小王八,还有alex一起装进麻袋,然后把麻袋封上口子。但其实这种理解相当片面

2872
来自专栏木可大大

编写优雅代码的最佳实践

Robert Martin曾说过"在代码阅读中说脏话的频率是衡量代码质量额唯一标准"。同时,代码的写法应当使别人理解它所需的时间最小化,也就是说我们写的代码是给...

45320
来自专栏PHP在线

设计模式分类

Introduction 根据目的和范围,设计模式可以分为五类。按照目的分为:创建设计模式,结构设计模式,以及行为设计模式。按照范围分为:类的设计模式,以及对象...

3356
来自专栏Web 开发

JavaScript Cookbook 2nd 之 Function

昨晚翻了一下,虽然都是一些旧知识,不过深入下去对照着其他资料一起看,还是能发现一些有意思的地方。

940
来自专栏Crossin的编程教室

【Python 第23课】 if, elif, else

今天补充之前讲过的一个语句:if。为什么我跳要着讲,因为我的想法是先讲下最最基本的概念,让你能用起来,之后你熟悉了,再说些细节。 关于if,可以发送数字『7』回...

2856
来自专栏阿凯的Excel

Python读书笔记15(人机交互input函数)

后期如何需要制作游戏或者网站等需要记忆客户输入信息的时候,需要大量的进行人机交互,今天和大家分享input函数。功能上类似Excel VBA的InputBox功...

3915
来自专栏Python小屋

Python语言编程规范与优化建议

没有规矩,不成方圆。代码任何一种语言都有一些约定俗成的编码规范,Python也不例外。Python非常重视代码的可读性,对代码布局和排版有更加严格的要求。虽然一...

3294

扫码关注云+社区

领取腾讯云代金券