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

由於在Java的函數中聲明的變數是有作用域的，所以使用這種方法可以避免在外部直接存取私有屬性。基本達到封裝所需的內容。

這裡要注意的是，我們在函數的內部，可以使用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");

利弊

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

封裝使物件的重建更輕鬆；
弱化模組間的耦合，提高物件的可重用性；
有助於避免命名空間衝突；
……

2、弊處

私人方法很難測試；

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

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

【相關教學推薦】

1.

JavaScript影片教學2. JavaScript線上手冊
3.
bootstrap教學