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

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

相关文章

来自专栏猿人谷

一个正则表达式测试(只可输入中文、字母和数字)

  在项目中碰到了正则表达式的运用,正则还是非常强大的,不管什么编程语言,基本上都可以用到。之前在用java时特别是对用户名或密码使用正则非常爽,写脚本上用正则...

3446
来自专栏我的博客

原生JavaScript第三天

1.日期时间 var obj=new Date(); //alert(obj);//不同浏览器显示不同 var year=obj.getFullYear();...

2647
来自专栏灯塔大数据

干货 | 数据科学入门必读:如何使用正则表达式?

有时候,这些数据中会包含大量文本语料。比如,假如我们需要搞清楚「xxx文件 」中谁给谁发送过邮件,那么我们就要筛查 1150 万份文档!我们可以采用人工方式,亲...

1042
来自专栏owent

C++ 新特性学习(一) -- 概述+智能指针(smart_ptr)

C++ 0x/11 终于通过了,真是个很爽的消息。于是乎我决定对新的东西系统学习一下。

531
来自专栏cs

有效的xml文档--DTD

感觉简书越来越没有意思了,给人感觉越来越差,不是写cs博客的地方。 DTD(document type define,简称DTD)是有效的xml文档基础,是一...

3087
来自专栏用户2442861的专栏

CSS基础(七):z-index详解

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

441
来自专栏鬼谷君

python datetime模块参数详解

1112
来自专栏学习力

《Java从入门到放弃》JavaSE入门篇:异常

1563
来自专栏Ryan Miao

String的内存模型,为什么String被设计成不可变的

String是Java中最常用的类,是不可变的(Immutable), 那么String是如何实现Immutable呢,String为什么要设计成不可变呢? 前...

30113
来自专栏Python

JavaScript基础

一 JavaScript的基础 1.1 JS的引入方式 1 直接编写 <script> alert('hello yuan') ...

2058

扫码关注云+社区