面向物件系列講解——混合模式
阿新 • • 發佈：2022-05-04
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，這也就是說，無論我們使用多少次，進行多少次物件的例項化，那麼都僅僅在後臺開闢了一片空間，而不是多個空間。
注意，此種方式是混合方式構造物件。平時最為常用的方式。