面向对象系列讲解——混合模式
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，这也就是说，无论我们使用多少次，进行多少次对象的实例化，那么都仅仅在后台开辟了一片空间，而不是多个空间。
注意，此种方式是混合方式构造对象。平时最为常用的方式。
极客编程技术分享
