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

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 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

我是这样挑战不用 for 循环的

学Python最简单的方法是什么?推荐阅读:Python开发工程师成长魔法 为什么要挑战自己在代码里不写for loop?因为这样可以迫使你去使用比较高级、地...

3308
来自专栏写代码的海盗

分水岭 golang入坑系列

第三式开篇语有些负面, 所以这里就不贴了。有兴趣的自己可以去看看 https://andy-zhangtao.gitbooks.io/golang/conten...

3764
来自专栏听雨堂

Pandas对行情数据的预处理

库里是过去抓取的行情数据,间隔6秒,每分钟8-10个数据不等,还有开盘前后的一些数据,用Pandas可以更加优雅地进行处理。 ? 需要把当前时间设置为index...

19010
来自专栏用户2442861的专栏

2015 华为 校招回忆录---篇(上)

本文由CSDN-蚍蜉撼青松【主页:http://blog.csdn.net/howeverpf】原创,转载请注明出处!

842
来自专栏C语言及其他语言

【每日一题】[蓝桥杯][算法提高VIP]任意年月日历输出

这是一个蓝桥杯的真题哈,大家可以试试锻炼锻炼: 题目描述 已知2007年1月1日为星期一。 设计一函数按照下述格式打印2007年以后(含)某年某月的日历,20...

34310
来自专栏学习力

《Java从入门到放弃》JavaSE入门篇:运算符

1446
来自专栏liulun

Nim教程【五】

这是国内第一个关于Nim的系列教程 先说废话 业内的人认为能够直接操作系统硬件的语言才称得上系统级的编程语言 常见的系统级编程语言有:汇编、C、C++、D、GO...

1768
来自专栏老九学堂

学习C语言的用途以及如何快速掌握C语言

C是基础的语言 被广泛用于操作系统和编译器的开发 功能非常强 虽然现在不是最流行但它是 最基础的东西 也是比较好学的语言 如:金山的创始人江明 从30...

2947
来自专栏小詹同学

Python系列之六——拿什么拯救你?我的大脑

我一定是智障了,话不多说,上图上图~ ? 就是这样10个选择题,你没有看错,我一定是个智障了~佩服不用穷举,也不用参考网上的大...

3284
来自专栏码洞

编程的智慧

编程是一种创造性的工作,是一门艺术。精通任何一门艺术,都需要很多的练习和领悟,所以这里提出的“智慧”,并不是号称一天瘦十斤的减肥药,它并不能代替你自己的勤奋。然...

361

扫描关注云+社区