當前位置:才華齋>設計>網頁設計>

明白javascript封裝

網頁設計 閱讀(5.85K)

封裝可以被定義為對物件的內部資料表現形式和實現細節進行隱藏。通過封裝可以強制實施資訊隱藏。

明白javascript封裝

在JavaScript中,並沒有顯示的宣告私有成員的關鍵字等。所以要想實現封裝/資訊隱藏就需要從另外的思路出發。我們可以使用閉包的概念來建立只允許從物件內部訪問的方法和屬性,來達到封裝的要求。

基本方式

一般來說,我們學用的有三種方法來達到封裝的目的。

使用來宣告一個變數,然後再宣告getXXX、setXXX等取值、賦值的方法。

使用this._XXX來宣告一個變數,然後再宣告getXXX、setXXX等取值、賦值的方法。

利用“函式作用域”這一個概念來做。

1. 門戶大開型

var Book = function(isbn,title,author){ sbn(isbn); itle(title); uthor(author); }; otype = { setIsbn: function(isbn){ = isbn; }, getIsbn: function(){ return ; }, setTitle: function(title){ e = title; }, getTitle: function(){ return e; }, setAuthor: function(author){ or = author; }, getAuthor: function(){ return or; } };

使用這種方法實現的.封裝,雖然實現了取值器與賦值器以保護私有屬性。但是在實際使用中,私有屬性依然可以從外部訪問,所以從根本上講,沒有實現封裝。

2. 用命名規範進行區別

var Book = function(isbn,title,author){ sbn(isbn); itle(title); uthor(author); }; otype = { 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; } };

使用這種方法與第一種類似,區別在於使用不同的命名來保護私有屬性的使用。但是,從實際應用來說其仍然沒有實現封裝。

3. 使用函式作用域

var Book = function(newIsbn,newTitle,newAuthor){ var isbn,title,author; sbn=function(newIsbn){ isbn = newIsbn; }; sbn=function(){ return isbn; }; itle=function(newTitle){ title = newTitle; }; itle=function(){ return title; }; sbn=function(newAuthor){ author = newAuthor; }; sbn=function(){ return author; }; }

由於在JavaScript的函式中宣告的變數是有作用域的,所以使用這種方法可以避免在外部直接訪問私有屬性。基本達到封裝所要求的內容。

這裡要注意的是,我們在函式的內部,可以使用以及var來宣告變數。區別是使用宣告的變數在外部是可以訪問的。使用var宣告的變數,由於受到函式作用域的保護,在函式的外部是無法直接訪問的。

4. 使用函式作用域的變形

var Book = (function(){ // ...其他靜態方法 return function(newIsbn,newTitle,newAuthor){ var isbn,title,author; sbn=function(newIsbn){ isbn = newIsbn; }; sbn=function(){ return isbn; }; itle=function(newTitle){ title = newTitle; }; itle=function(){ return title; }; sbn=function(newAuthor){ author = newAuthor; }; sbn=function(){ return author; }; }; })();

這種方法是直接返回一個構造器的執行。且這裡的構造器是一個內嵌函式。

這種方法的優點是“在記憶體中只會存在一份。因為其他靜態方法被宣告在構造器之外,所以它們不是特權方法。”

判斷一個方法是否應該被設計為靜態方法的原則是“這個方法是否會訪問私有屬性”。如果它不需要,那麼將其設計為靜態方法會更有效率,因為它只會被建立一份。

常量

我們可以使用“只有取值器,沒有賦值器”的方式來實現常量。

// 1. var Book = function(){ var constants = ["key1": "1","key2": "2","key3": "3"]; onstant = function(key){ return constants[key]; }; }; onstant("key1"); // 2. var Book = (function(){ var constants = ["key1": "1","key2": "2","key3": "3"]; var con = function(){}; onstant = function(name){ return constants[name]; }; return con; })(); onstant("key1");

利弊

1、利處

封裝保護了內部資料的完整性;

封裝使物件的重構更輕鬆;

弱化模組間的耦合,提高物件的可重用性;

有助於避免名稱空間衝突;

……

2、弊處

私用方法很難測試

必須與複雜的作用域鏈打交道,使錯誤排程更困難;

容易形成過度封裝;

JavaScript並不原生支援封裝,所以在JavaScript中實現封裝存在複雜性的問題;