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

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

相关文章

来自专栏FreeBuf

CTF小技巧:文本解密工具 Text Decoder Toolkit

欢迎来到文本解码挑战赛! T{4 G=C 9<=E B63 3<3;G /<2 9<=E G=C@A3:4^ G=C <332 <=B 43/@ B63 @3A...

24110
来自专栏云飞学编程

Python学习,字符串格式化方法不止%和farmat,还有f-string

一说起字符串格式化,我们脑海里最先出现的必然是%和format,但是在python3.6之后,又更新了一种更快更便捷的方法,那就是f-string!它是由PEP...

1372
来自专栏影子

jQuery中的常用内容总结(三)

4369
来自专栏Modeng的专栏

Javascript数组系列二之你不了解的迭代1

我们在《Javascript数组系列一之栈与队列》中介绍了一些数组的用法。比如:数组如何表现的和「栈」一样,用什么方法表现的和「队列」一样等等一些方法,因为 J...

1414
来自专栏GreenLeaves

Vue.js系列之四计算属性和观察者

一、计算属性 1、模版内的表达式非常便利,但是设计它们的初衷是用于简单计算的。在模版中放入太多的逻辑运算会让模版过重且难以维护,例如如下代码: <div id=...

2236
来自专栏TungHsu

这或许是对小白最友好的python入门了吧——13,字典初识

前边我们学习了列表、元组等储存元素的方式,今天我们来看一个更为强大的:字典。 像列表用方括号[]、元组用圆括号()一样,字典用花括号{} 先编写一个简单的词典,...

3415
来自专栏互联网杂技

StackOverflow上关于JavsScript的热门问答

Q1:javascript的闭包是如何工作的? 正如爱因斯坦所说的: 如果你不能把它解释给一个六岁的小孩,说明你对它还不够了解。 我曾尝试向一个27岁的朋友解释...

3226
来自专栏企鹅号快讯

R包系列——stringr包

stringr包是Hadley Wickham大神贡献的R包之一,主要用于字符串的处理。对于经常需要对数据进行预处理的分析人员来说,简直是一把“利器”,可谓是上...

2726
来自专栏黑泽君的专栏

传智播客_毕姥爷_2012年毕向东Java基础教程_毕向东老师

视频百度网盘下载链接:https://pan.baidu.com/s/1bpD3P07#list/path=%2F

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

【优秀题解】问题 1442:打印十字图

我的思路就是一步一步的分析,首先我想到的就是分配一块内存来储存图案,通过观察知道图案是一个方正,于是想到用字符矩阵。然后分布完成,首先就是把方块字符中...

451

扫码关注云+社区