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

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

相关文章

来自专栏前端黑板报

Sass vs Less

2007年发布,最早的一款CSS预处理器,带来了变量、常量、嵌套、混入、函数、循环等功能, 解决了CSS不可编程的短板。由于浏览器不能直接识别Sass,所以需要...

23890
来自专栏游戏杂谈

全局变量的三种声明方法

显示true FWK未定义,说明隐式声明的全局变量可以被delete,与global对象的parseInt、escape、parseFloat等等类似,可直接被...

13510
来自专栏互联网杂技

StackOverflow上关于JavsScript的热门问答

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

33860
来自专栏郭耀华‘s Blog

Java英文单词Java基础常见英语词汇

Java英文单词Java基础常见英语词汇(共70个) OO: object-oriented ,面向对象               OOP:object-...

43980
来自专栏企鹅号快讯

R包系列——stringr包

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

34860
来自专栏安恒信息

利用WPAD/PAC与JScript实现Windows 10远程代码执行

简介 Project Zero团队在google发表了一篇关于利用WPAD/PAC和JScript在本地网络中实现Windows10远程代码执行的博客,笔者根据...

22650
来自专栏腾讯NEXT学位

初探TypeScript

10320
来自专栏黑泽君的专栏

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

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

15910
来自专栏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...

305100
来自专栏TungHsu

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

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

35150

扫码关注云+社区

领取腾讯云代金券