理解javascript封裝，javascript封裝

理解javascript封裝，javascript封裝

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

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

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

使用this.XXX來聲明一個變數，然後再聲明getXXX、setXXX等取值、賦值的方法。
使用this._XXX來聲明一個變數，然後再聲明getXXX、setXXX等取值、賦值的方法。
利用“函數範圍”這一個概念來做。
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; }};

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

2. 用命名規範進行區別

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; }};

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

3. 使用函數範圍

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的函數中聲明的變數是有範圍的，所以使用這種方法可以避免在外部直接存取私人屬性。基本達到封裝所要求的內容。

這裡要注意的是，我們在函數的內部，可以使用this.XXX以及var來聲明變數。區別是使用this.XXX聲明的變數在外部是可以訪問的。使用var聲明的變數，由於受到函數範圍的保護，在函數的外部是無法直接存取的。

4. 使用函數範圍的變形

var Book = (function(){ // ...其他靜態方法 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;  }; };})();

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

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

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

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

// 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、利處

封裝保護了內部資料的完整性；
封裝使對象的重構更輕鬆；
弱化模組間的耦合，提高對象的可重用性；
有助於避免命名空間衝突；
……
2、弊處

私用方法很難測試；
必須與複雜的範圍鏈打交道，使錯誤調度更困難；
容易形成過度封裝；
JavaScript並不原生支援封裝，所以在JavaScript中實現封裝存在複雜性的問題；

以上就是本文的全部內容，希望對大家的學習有所協助。

您可能感興趣的文章:

• 一個AJAX自動完成功能的js封裝源碼[支援中文]
• 一個js封裝的不錯的選項卡效果代碼
• Class Of Marquee Scroll通用不間斷滾動JS封裝類
• JS類的封裝及實現代碼
• js資料驗證集合、js email驗證、js url驗證、js長度驗證、js數字驗證等簡單封裝
• 基於jquery封裝的一個js分頁
• 把jQuery的類、外掛程式封裝成seajs的模組的方法
• jquery自動將form表單封裝成json的具體實現
• 使用原生js封裝webapp滑動效果(慣性滑動、滑動回彈)
• javascript行動裝置Web開發中對touch事件的封裝執行個體