理解javascript封裝
封裝可以被定義為對對象的內(nèi)部數(shù)據(jù)表現(xiàn)形式和實(shí)現(xiàn)細(xì)節(jié)進(jìn)行隱藏。通過封裝可以強(qiáng)制實(shí)施信息隱藏。
在JavaScript中,并沒有顯示的聲明私有成員的關(guān)鍵字等。所以要想實(shí)現(xiàn)封裝/信息隱藏就需要從另外的思路出發(fā)。我們可以使用閉包的概念來創(chuàng)建只允許從對象內(nèi)部訪問的方法和屬性,來達(dá)到封裝的要求。
基本方式
一般來說,我們學(xué)用的有三種方法來達(dá)到封裝的目的。
使用this.XXX來聲明一個(gè)變量,然后再聲明getXXX、setXXX等取值、賦值的方法。
使用this._XXX來聲明一個(gè)變量,然后再聲明getXXX、setXXX等取值、賦值的方法。
利用“函數(shù)作用域”這一個(gè)概念來做。
1. 門戶大開型
var Book = function(isbn,title,author){
this.setIsbn(isbn);
this.setTitle(title);
this.setAuthor(author);
};
Book.prototype = {
setIsbn: function(isbn){
this.isbn = isbn;
},
getIsbn: function(){
return this.isbn;
},
setTitle: function(title){
this.title = title;
},
getTitle: function(){
return this.title;
},
setAuthor: function(author){
this.author = author;
},
getAuthor: function(){
return this.author;
}
};
使用這種方法實(shí)現(xiàn)的封裝,雖然實(shí)現(xiàn)了取值器與賦值器以保護(hù)私有屬性。但是在實(shí)際使用中,私有屬性依然可以從外部訪問,所以從根本上講,沒有實(shí)現(xiàn)封裝。
2. 用命名規(guī)范進(jìn)行區(qū)別
var Book = function(isbn,title,author){
this.setIsbn(isbn);
this.setTitle(title);
this.setAuthor(author);
};
Book.prototype = {
setIsbn: function(isbn){
this._isbn = isbn;
},
getIsbn: function(){
return this._isbn;
},
setTitle: function(title){
this._title = title;
},
getTitle: function(){
return this._title;
},
setAuthor: function(author){
this._author = author;
},
getAuthor: function(){
return this._author;
}
};
使用這種方法與第一種類似,區(qū)別在于使用不同的命名來保護(hù)私有屬性的使用。但是,從實(shí)際應(yīng)用來說其仍然沒有實(shí)現(xiàn)封裝。
3. 使用函數(shù)作用域
var Book = function(newIsbn,newTitle,newAuthor){
var isbn,title,author;
this.setIsbn=function(newIsbn){
isbn = newIsbn;
};
this.getIsbn=function(){
return isbn;
};
this.setTitle=function(newTitle){
title = newTitle;
};
this.getTitle=function(){
return title;
};
this.setIsbn=function(newAuthor){
author = newAuthor;
};
this.getIsbn=function(){
return author;
};
}
由于在JavaScript的函數(shù)中聲明的變量是有作用域的,所以使用這種方法可以避免在外部直接訪問私有屬性?;具_(dá)到封裝所要求的內(nèi)容。
這里要注意的是,我們在函數(shù)的內(nèi)部,可以使用this.XXX以及var來聲明變量。區(qū)別是使用this.XXX聲明的變量在外部是可以訪問的。使用var聲明的變量,由于受到函數(shù)作用域的保護(hù),在函數(shù)的外部是無法直接訪問的。
4. 使用函數(shù)作用域的變形
var Book = (function(){
// ...其他靜態(tài)方法
return function(newIsbn,newTitle,newAuthor){
var isbn,title,author;
this.setIsbn=function(newIsbn){
isbn = newIsbn;
};
this.getIsbn=function(){
return isbn;
};
this.setTitle=function(newTitle){
title = newTitle;
};
this.getTitle=function(){
return title;
};
this.setIsbn=function(newAuthor){
author = newAuthor;
};
this.getIsbn=function(){
return author;
};
};
})();
這種方法是直接返回一個(gè)構(gòu)造器的執(zhí)行。且這里的構(gòu)造器是一個(gè)內(nèi)嵌函數(shù)。
這種方法的優(yōu)點(diǎn)是“在內(nèi)存中只會(huì)存在一份。因?yàn)槠渌o態(tài)方法被聲明在構(gòu)造器之外,所以它們不是特權(quán)方法?!?/p>
判斷一個(gè)方法是否應(yīng)該被設(shè)計(jì)為靜態(tài)方法的原則是“這個(gè)方法是否會(huì)訪問私有屬性”。如果它不需要,那么將其設(shè)計(jì)為靜態(tài)方法會(huì)更有效率,因?yàn)樗粫?huì)被創(chuàng)建一份。
常量
我們可以使用“只有取值器,沒有賦值器”的方式來實(shí)現(xiàn)常量。
// 1.
var Book = function(){
var constants = ["key1": "1","key2": "2","key3": "3"];
this.getConstant = function(key){
return constants[key];
};
};
Book.getConstant("key1");
// 2.
var Book = (function(){
var constants = ["key1": "1","key2": "2","key3": "3"];
var con = function(){};
con.getConstant = function(name){
return constants[name];
};
return con;
})();
Book.getConstant("key1");
利弊
1、利處
封裝保護(hù)了內(nèi)部數(shù)據(jù)的完整性;
封裝使對象的重構(gòu)更輕松;
弱化模塊間的耦合,提高對象的可重用性;
有助于避免命名空間沖突;
……
2、弊處
私用方法很難測試;
必須與復(fù)雜的作用域鏈打交道,使錯(cuò)誤調(diào)度更困難;
容易形成過度封裝;
JavaScript并不原生支持封裝,所以在JavaScript中實(shí)現(xiàn)封裝存在復(fù)雜性的問題;
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助。
- 一個(gè)AJAX自動(dòng)完成功能的js封裝源碼[支持中文]
- 一個(gè)js封裝的不錯(cuò)的選項(xiàng)卡效果代碼
- Class Of Marquee Scroll通用不間斷滾動(dòng)JS封裝類
- JS類的封裝及實(shí)現(xiàn)代碼
- js數(shù)據(jù)驗(yàn)證集合、js email驗(yàn)證、js url驗(yàn)證、js長度驗(yàn)證、js數(shù)字驗(yàn)證等簡單封裝
- 基于jquery封裝的一個(gè)js分頁
- 把jQuery的類、插件封裝成seajs的模塊的方法
- jquery自動(dòng)將form表單封裝成json的具體實(shí)現(xiàn)
- 使用原生js封裝webapp滑動(dòng)效果(慣性滑動(dòng)、滑動(dòng)回彈)
- javascript移動(dòng)設(shè)備Web開發(fā)中對touch事件的封裝實(shí)例
相關(guān)文章
Bootstrap 填充Json數(shù)據(jù)的實(shí)例代碼
本篇文章主要介紹了Bootstrap 填充Json數(shù)據(jù)的實(shí)例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
深入理解JavaScript系列(16) 閉包(Closures)
本章我們將介紹在JavaScript里大家經(jīng)常來討論的話題 —— 閉包(closure)。閉包其實(shí)大家都已經(jīng)談爛了。盡管如此,這里還是要試著從理論角度來討論下閉包,看看ECMAScript中的閉包內(nèi)部究竟是如何工作的2012-04-04
JS實(shí)現(xiàn)table表格數(shù)據(jù)排序功能(可支持動(dòng)態(tài)數(shù)據(jù)+分頁效果)
這篇文章主要介紹了JS實(shí)現(xiàn)table表格數(shù)據(jù)排序功能(可支持動(dòng)態(tài)數(shù)據(jù)+分頁效果) 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友一起看看吧2016-05-05
KnockoutJS 3.X API 第四章之表單value綁定
Knockout是一個(gè)以數(shù)據(jù)模型(data model)為基礎(chǔ)的能夠幫助你創(chuàng)建富文本,響應(yīng)顯示和編輯用戶界面的JavaScript類庫。這篇文章主要介紹了KnockoutJS 3.X API 第四章之表單value綁定的相關(guān)資料,需要的朋友可以參考下2016-10-10

