JS的幾種封裝方法

2021-08-21 02:34:29 字數 1738 閱讀 7685

1、物件原型封裝

基本思想是在原函式中建立getter和setter方法，之後在原函式的原型進行其他操作。

好處：只能通過get和set訪問函式中的資料，實現額真正的封裝，實現了屬性的私有化

劣處：這樣做所有的方法都在物件中，會增加記憶體的開銷

測試demo

：

/** 1、這種封裝個方法getter和setter方法都在該建構函式中，資料較多的時候占用的記憶體較大* */


function person(name,age,no);


//var _no,_age,_name; 


this.setno=function(no); this.getno=function(); 


this.setname=function(name); this.getname=function(); this.setage=function(age); this.getage=function(); this.setno(no); this.setname(name); this.setage(age);}person.prototype=};var per=new person("lili",23,"0004");sconsole.log(per.tostring());per.setno("0001");console.log(per.tostring());per.setage(25);console.log(per.tostring());


2、閉包封裝


基本思想：構建閉包函式，在函式內部返回匿名函式，在匿名函式內部構建方法，在每次進行例項化呼叫的時候，其實都是每次都是呼叫返回函式的子函式，同時能保持對物件中的屬性的共享


好處：可以做到例項物件向物件屬性的共享並且保持私有


壞處：所有的get和set都儲存在物件中，不能儲存在prototype中，會增加開銷


/*


* 2、閉包的封裝方式，在這個封裝方法中，所有的例項成員都共享屬性和方法


* 使得所有得方法和屬性都私有且物件間共享


* */


var person=(function();


};let times=0;//共享資料


return function(no,name,age);


this.getno=function();


this.setname=function(name);


this.getname=function();


this.setage=function(age);


this.getage=function(age);


this.setno(no);


this.setage(age);


this.setname(name);


}})();


person.prototype=


}let per=new person("0001",15,"simu");//輸出之後times會逐漸增加，變為1、2、3


let per1=new person("0002",15,"simu1");


let per2=new person("0003",15,"simu2");


console.log( per.tostring());


console.log( per1.tostring());


console.log( per2.tostring());




 
js常見的幾種封裝方法，方便呼叫
事件委託的封裝 function eveent child,cb 事件監聽式繫結事件 function addevent ele,type,cb else 阻止事件冒泡封裝 function stopbubble eve else 獲取行內樣式的相容 function getstyle ele,at...


js方法的封裝
為什麼要進行方法的封裝?在平時的生產環境中,我們經常寫出這樣的 function fadd ia,ib function fmul ia,ib 其本質上是這樣的 var fadd function ia,ib var fmul function ia,ib 這樣的話,我們就建立了兩個全域性變數,ia...


JS封裝的常用方法
export function getbrowser export function geturlkey name 1 寫入帶有自定義有效期的cookie 使用方式 這是有設定過期時間的使用示例 s20是代表20秒 h是指小時，如12小時則是 h12 d是天數，30天則 d30 用法示例 setco...