JavaScript 類的封裝操作示例詳解
本文實例講述了JavaScript 類的封裝操作。分享給大家供大家參考，具體如下：
一，首先，為什么要使用封裝？
這是從信息的角度出發(fā)的，信息的隱藏是最終的目的，而封裝只不過是實現(xiàn)隱藏的一種方法。
這里我們需要明白一點就是：類的定義有如下的三種方式：
（第一種）門戶大開型方式 （第二種）用命令規(guī)范區(qū)別私有和公有的方式 （第三種）閉包
現(xiàn)在詳細描述一下每一種類的定義方式：
針對第一種，門戶大開類型
首先，我們來看一種情況
（1）聲明一個簡單的類，代碼如下
function Person(age,name) {
this.name=name;
this.age=age;
}
?。?）實例化類+調(diào)用
var p=new Person(-10,"小明"); alert(p.age)//結(jié)果出現(xiàn)年齡出現(xiàn)負數(shù)
從上述的運行結(jié)果中，我們可以看出程序可以正常執(zhí)行，但這并符合實際，因為年齡出現(xiàn) 了負數(shù)，這不是我們想要的，我們需要一個能正確處理并產(chǎn)生與實際情況相符的解決方案。
為了能解決上述年齡出現(xiàn)的問題，我們可以這樣做：擴展類的原型鏈
Person.prototype={
checkAge:function (age) {
if(0<age&&age<150){
return true;
}else {
return false;
}
}
}
加上解決方案后，代碼如下
（1）基本類
function Person(age,name) {
this.name=name;
//調(diào)用方法判斷驗證
if(!this.checkAge(age)){
throw new Error("年齡必須在0-150之間");
}
this.age=age;
}
（2）年齡判斷驗證
Person.prototype={
checkAge:function (age) {
if(0<age&&age<150){
return true;
}else {
return false;
}
}
}
（3）調(diào)用
var p2=new Person(10,"小明"); alert(p2.age)
我們還可以給name添加一個讀取驗證，name為空時使用默認值 同樣是擴展類的原型鏈
代碼如下，
Person.prototype["getName"]=function () {
return this.name||"我是默認的";
}
//調(diào)用
var p3=new Person(10,""); alert(p3.getName())//結(jié)果為“我是默認的”
總結(jié)一下：當類被定義為門戶大開類型時會出現(xiàn)與實際不符合的情況 ，雖然我們可以加在類上擴展原型類加驗證方法解決，但是這樣會使類變得臃腫。
針對第二種，用命名規(guī)范區(qū)別私有和公有
步驟如下，
（1）定義類 在類中定義變量（私有和公有變量）+驗證方法的調(diào)用
//用命名規(guī)范來區(qū)別私有和公有
function Person(name,age,email) {
//定義私有變量
this._name;//私有
this.setName(name);//只是方法的調(diào)用，方法中有驗證，而不是在類中驗證
this._age;//私有
this.setAge(age);
this.email=email;//公有的
}
（2）在類的原型上面 擴展賦值方法
Person.prototype={//直接擴展至原型上，可以在本類的內(nèi)部使用this調(diào)用
setName:function (name) {
this._name=name;
},
setAge:function (age) {
//需要做判斷符號實際情況
if(age>0&&age<150){//驗證不在類中，類不會變的臃腫
this._age=age;
}else {
throw new Error("年齡必須是在0到150范圍內(nèi)")
}
}
}
（3）應用
var text1=new Person("測試",-10,"qq.com");
alert(text1._age)//-10 程序會報錯 這是我們想要的（說明驗證是對的）
var p2=new Person("測試2",10,"qq.cpm");
alert(p2._age)//程序正常運行 達到我們的目標
總結(jié)一下：在類的定義是使用命名規(guī)范來定義私有變量和公有變量，并將驗證方法和賦值方法擴展到本類的原型鏈上，在類中調(diào)用方法即可（會有返回值），這樣不會導致類的臃腫。
針對第三種，閉包實現(xiàn)封裝
這種方式有點像高級語言，在定義類是使用get，set方法實現(xiàn)數(shù)據(jù)的操作
（1）定義一個基本類（變量+操作變量的方法）
function Person(name,age,email) {
//(1)聲明變量和對變量進行操作的get和set方法
this.email=email;//公有變量
//get方法
this.getName=function (name){
return this.name;//為什么是this調(diào)用呢？請看set方法
}
this.getAge=function (age){
return this.age;
}
//set方法 這里相當于在類上的擴展
this.setName=function (name) {
this.name=name;//Person.prototype.name 這里寫明了get中this的寫法的來源
}
this.setAge=function (age) {
if(age>0&&age<150){
this.age=age;//Person.prototype.name 這里寫明了get中this的寫法的來源
}else {
throw new Error("年齡必須是在0到150范圍內(nèi)");
}
}
//（2）寫一個構(gòu)造函數(shù) 做初始化 實現(xiàn)閉包 確保set是在get之前的，不然get時會出現(xiàn)錯誤
this.init=function () {
this.setName(name);
this.setAge(age);
}
this.init();//顯示調(diào)用
}
（2）應用
var p=new Person("text",-10,"qq.com");
alert(p.age)//程序由于不符合實際而被阻斷，符合要求
注：額外的閉包寫法 var 方式
var _sex="M";
this.getSex=function () {
return _sex;
}
this.setSex=function () {
_sex=sex;
}
總結(jié)一下：
（1）這里只是函數(shù)和屬性的簡單封裝，還有更為復雜是業(yè)務需要封裝，使用get和set方法時，需要一個構(gòu)造函數(shù)用于兩者先后順序的初始化實現(xiàn)閉包，之后顯示調(diào)用，確保set是在get之前的。
（2）閉包的實現(xiàn)，是通過get和set實現(xiàn)的，this.方式賦值時沒有暴露在外面而是通過get，set方法實現(xiàn)閉包。
二，靜態(tài)化
普通屬性和函數(shù)是作用在對象上到，而靜態(tài)函數(shù)是定義到類上的。
第一種靜態(tài)函數(shù)的寫法 ：寫在類上
（1）首先，定義一個簡單的類，例如
function Person(name,age) {
this.name=name;
this.age;age;
this.showName=function () {
alert(this.name);
}
}
（2）定義一個寫在類上的方法，Person.add --》（類.函數(shù)）或者（類.屬性），例如
Person.add=function (x,y) {
return x+y;
}
（3）應用
alert(Person.add(10,20));//結(jié)果為30
總結(jié)一下，該種定義方式有點類似于高級語言的靜態(tài)類，使用與高級語言的相同通過類直接調(diào)用。
第二種靜態(tài)函數(shù)的寫法 ：使用類中類的方式完成每一個對象全擁有當前類中相同的屬性和函數(shù) 。注意： 類中類的方式是一次性賦值的
（1）類的定義格式如下
var cat=(function () {
//私有靜態(tài)屬性
var AGE=1;
function add(x,y) {
return x+y;
}
return function () {//類中類 return返回的類中持有與上面類中相同的屬性與函數(shù) 則共同的AGE和add稱為靜態(tài)屬性和靜態(tài)函數(shù)
this.AGE=AGE;
this.add=function (x,y) {
return add(x,y)
}
}
})(）//實例化cat，實質(zhì)是通過return實例化的
（2）應用
alert(new cat().add(1,3))//4 alert(new cat().AGE)//1
總結(jié)一下：從上面的代碼格式中我們不難看出在一個類中定義有私有的屬性和方法，與一個返回可以初始化本類私有靜態(tài)屬性和方法的類，該類我們稱為類中類。當我們實例化外層類時實質(zhì)上是通過該類內(nèi)部的類return實例化的。
封裝的優(yōu)點：
（1）保護內(nèi)部數(shù)據(jù)完整性是封裝一大用處
（2）對象的重構(gòu)變得輕松，（如果沒有封裝你敢動正在運用的代碼嗎？） 答案肯定是不敢的。
（3）化模塊間的耦合
弊端：
（1）私有的方法會變得難以進行單元測試
（2）使用封裝意味著與復雜的代碼打交道
（3）最大問題封裝在JavaScript中很難實現(xiàn) 除非運用自如，否則到處封裝，使測試變得困難。
以上只是學習的初步理解，不好還希望多多理解。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
相關(guān)文章
js將當前時間格式化為 年-月-日 時:分:秒的實現(xiàn)代碼
這篇文章主要介紹了js將當前時間格式化為 年-月-日 時:分:秒主要是使用js的Date()對象，將系統(tǒng)當前時間格式化為年-月-日 時:分:秒，需要的朋友可以參考下2018-01-01
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單購物車模塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
echarts折線圖實現(xiàn)部分虛線部分實線效果的方法
在折線圖中,通常實線表示實際數(shù)據(jù),而虛線用于表示預測數(shù)據(jù),這篇文章主要介紹了echarts折線圖實現(xiàn)部分虛線部分實線效果的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)飛舞的泡泡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
Javascript實現(xiàn)獲取窗口的大小和位置代碼分享
這篇文章主要分享了一段Javascript實現(xiàn)獲取窗口的大小和位置代碼，兼容性非常好，這里推薦給大家2014-12-12
這篇文章主要介紹了JS實現(xiàn)隊列的先進先出功能,結(jié)合實例形式分析了基于JS的隊列初始化、賦值等相關(guān)操作技巧,需要的朋友可以參考下2017-05-05
JS判斷當前是否平板安卓并是否支持cordova方法的示例代碼
這篇文章主要介紹了JS判斷當前是否平板安卓并是否支持cordova方法,pc和安卓平板共用一套代碼,平板的代碼用了cordova做了一個殼子嵌套如果用了cordova就不支持elementUI中的上傳功能，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-08-08
layui使用數(shù)據(jù)表格實現(xiàn)購物車功能
這篇文章主要為大家詳細介紹了layui使用數(shù)據(jù)表格實現(xiàn)購物車功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了Javascript刷新窗口方法,以實例形式分析了JavaScript刷新窗口的四種常用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了JS常見面試試題,總結(jié)分析了javascript去重、遍歷、閉包、繼等相關(guān)算法與操作技巧,需要的朋友可以參考下2019-08-08