HTML5学堂-码匠 HTML5学堂

您当前位于:JavaScript高级 ——> 面向对象系列-混合模式是什么,如何实现?

面向对象系列-混合模式是什么,如何实现?

2015/05/02 21:24:57 | 作者:HTML5学堂(码匠) | 分类:JavaScript高级 | 关键词:JavaScript,面向对象,混合模式

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

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

混合模式的核心思想

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

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

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>面向对象-独行冰海</title>
  6. </head>
  7. <body>
  8.     <script>
  9.     function createPerson(username, blogsrc, weibo){
  10.         // 原料的投入
  11.         var user = new Object();
  12.         // 加工过程的开始
  13.         user.username = username;
  14.         user.blogsrc = blogsrc;
  15.         user.weibo = weibo;
  16.         user.showInf = function (){
  17.             alert('姓名:'+this.username+'\n博客地址:'+this.blogsrc+'\n微博地址:'+this.weibo);
  18.         }
  19.         // 加工过程的结束
  20.         // 成品出厂
  21.         return user;
  22.     }
  23.     var user1 = createPerson('独行冰海', 'http://blog.163.com/hongshaoguoguo@126', 'http://weibo.com/u/2706684357');
  24.     console.log(user1.showInf);
  25.     var user2 = createPerson('独行冰海', 'http://blog.163.com/hongshaoguoguo@126', 'http://weibo.com/u/2706684357');
  26.     console.log(user2.showInf);
  27.     console.log(user1.showInf == user2.showInf);
  28.     </script>
  29. </body>
  30. </html>

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

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

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

  1. function CreatePerson(username, blogsrc, weibo){
  2.     this.username = username;
  3.     this.blogsrc = blogsrc;
  4.     this.weibo = weibo;
  5.     this.showInf = function (){
  6.         alert('姓名:'+this.username+'\n博客地址:'+this.blogsrc+'\n微博地址:'+this.weibo);
  7.     }
  8. }

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

  1. function CreatePerson(username, blogsrc, weibo){
  2.     this.username = username;
  3.     this.blogsrc = blogsrc;
  4.     this.weibo = weibo;
  5. }
  6. CreatePerson.prototype.showInf = function (){
  7.     alert('姓名:'+this.username+'\n博客地址:'+this.blogsrc+'\n微博地址:'+this.weibo);
  8. }

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

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

到此结束!!!

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

  1. console.log(user1.showInf);
  2. console.log(user2.showInf);
  3. console.log(user1.showInf == user2.showInf);

在谷歌控制台当中打印出的内容如下:
HTML5学堂 面向对象系列讲解——混合模式 h5course

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

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

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端