溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了如何使用javascript中的原型模式，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
介紹：在日常的開發過程中，我們經常會利用到前端模板引擎來做頁面渲染，因為存在很多頁面結構相同，內容不同的場景。這種場景在js層面也會遇到，
很多組件存在相同或者類似，重復的創建會導致系統的消耗，這就要用到原型模式了。將相似內容提取出來作為原型類，創建具體類時需要對原型類進行復制然后擴展。
需要注意的是，復制出來的對象在進行修改時不會影響到原型類，二者相互獨立。
定義：使用原型實例指定創建對象的種類，并且通過克隆這些原型創建新的對象。原型模式是一種對象創建型模式。
場景：我們還是基于Dialog類來實現原型模式，我將所有彈窗共有的屬性方法抽取出來，每次創建時通過復制其基礎屬性，在此基礎上進行完善，然后返回新的對象。
示例：
var Dialog = function(){
this.init = function(arg){
this.element = arg.element;
this.name = arg.name;
}
this.show = function(){
console.log(this.name + ' is show -> ' + this.element);
}
};
var createDialog = function(arg){
var _dialog = function(){};
_dialog.prototype = new Dialog();
var resDia = new _dialog();
resDia.init(arg);
return resDia;
}
var notice = createDialog({name:'notice',element:'<div>notice</div>'});
var toast = createDialog({name:'toast',element:'<div>toast</div>'});
var warnin = createDialog({name:'warnin',element:'<div>warnin</div>'});
notice.show(); //notice is show -> <div>notice</div>
toast.show(); //toast is show -> <div>toast</div>
warnin.show(); //warnin is show -> <div>warnin</div>原型模式總結：
優點：
* 當創建新的對象實例較為復雜時，使用原型模式可以簡化對象的創建過程，通過復制一個已有實例可以提高新實例的創建效率。
* 擴展性較好
缺點：
* 對已有類進行改造時需要修改源代碼，違背了開關原則。
看完上述內容，是不是對如何使用javascript中的原型模式有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
