面向对象系列讲解——混合模式
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，这也就是说，无论我们使用多少次，进行多少次对象的实例化，那么都仅仅在后台开辟了一片空间，而不是多个空间。
注意，此种方式是混合方式构造对象。平时最为常用的方式。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2016-02-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录