面向对象系列讲解——混合模式

HTML5学堂:我们解释了面向对象以及使用面向对象的原因,并书写了最为基本的面向对象的代码。同时我们提出了一些问题,工厂模式存在着一些缺陷,在这篇文章当中我们就来讲解这种混合模式的书写方法,解释一下,如何使用new去解决这种工厂模式的缺陷,如何利用原型解决“方法”的重复创建。

混合模式的核心思想

使用构造函数进行实例化,然后在构造函数当中进行属性的设置,在构造函数之外进行方法的设置,方法的设置使用原型进行书写。

本着这样的基本思想和原则,我们来调整之前的代码:

<!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');
    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);
    </script>
</body>
</html>

第一步,将function createPerson(username, blogsrc, weibo)函数的createPerson调整为CreatePerson(注:构造函数命名规范书写要求,首字母大写。虽然不大写首字母也没有什么关系,但是不符合书写规范)

第二步,去掉函数中原料投入的一步(var user = new Object();),也去除掉成品出厂的一步(return user)

第三步,用this取代掉所有的user(原来的对象名称),构建成如下代码:

function CreatePerson(username, blogsrc, weibo){
    this.username = username;
    this.blogsrc = blogsrc;
    this.weibo = weibo;
    this.showInf = function (){
        alert('姓名:'+this.username+'\n博客地址:'+this.blogsrc+'\n微博地址:'+this.weibo);
    }
}

第四步,将方法从函数中提取出来,利用原型的书写方式进行书写:

function CreatePerson(username, blogsrc, weibo){
    this.username = username;
    this.blogsrc = blogsrc;
    this.weibo = weibo;
}
CreatePerson.prototype.showInf = function (){
    alert('姓名:'+this.username+'\n博客地址:'+this.blogsrc+'\n微博地址:'+this.weibo);
}

第五步,进行新对象调用的时候,采用构造函数实例化的方法进行,如:

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

到此结束!!!

接下来我们来看看函数的比较结果:

console.log(user1.showInf);
console.log(user2.showInf);
console.log(user1.showInf == user2.showInf);

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

好吧,最后的一个打印值变成了true,这也就是说,无论我们使用多少次,进行多少次对象的实例化,那么都仅仅在后台开辟了一片空间,而不是多个空间。

注意,此种方式是混合方式构造对象。平时最为常用的方式。

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

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏落花落雨不落叶

canvas画简单电路图

57911
来自专栏hbbliyong

WPF Trigger for IsSelected in a DataTemplate for ListBox items

<DataTemplate DataType="{x:Type vm:HeaderSlugViewModel}"> <vw:HeaderSlug...

4044
来自专栏飞扬的花生

jsencrypt参数前端加密c#解密

      写程序时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,如何防止提交的请求不被抓包后串改,虽然无法说绝对安全却给非法提交提高了难度...

3849
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4788
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2102
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2517
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

30710
来自专栏魂祭心

原 canvas绘制clock

3964
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5256

扫码关注云+社区