JS封裝

封裝是面向對象的重要概念之一。如果一個程序沒有封裝性，也就談不上什麼面向 對象。但是，JavaScript並不像其他的語言，比如Java，有公有變量和私有變量等；在JavaScript中只有一種作用域：公有作用域。在本 章中，我們將會見識到JavaScript是如何實現封裝的特性的。

1. this和公有變量

首先需要理解this關鍵字。看下面的一段代碼，你應該對此感到熟悉：

Js代碼

function
 Person(name, age) {
    this
.name = name; 
// 定義一個公有變量
   this
.age = age;
    this
.show = 
function
() { 
// 定
義一個公有函數
        alert("name: "
 + name + 
"; age: "
 + age);
    }
}
var
 bill = 
new
 Person(
"Bill"
, 20);
alert(bill.name);
bill.show();

function Person(name, age) { this.name = name; // 定義一個公有變量 this.age = age; this.show = function() { // 定義一個公有函數 alert("name: " + name + "; age: " + age); } } var bill = new Person("Bill", 20); alert(bill.name); bill.show();

這裏的this關鍵字是必不可少的。前面只是讓大家記住，那麼爲什麼要這樣 呢？想想JavaScript的對象，JavaScript的對象類似於散列，一個<string, object>鍵-值對的集合。這裏的對象的屬性實際上都是離散的，並不像其他的語言那樣綁定到一個對象上面。this關鍵字指代的是屬性或者函數 的調用者，也就是說，誰調用這個屬性或者函數指的就是誰。可以看到，這裏的this和Java或者C++的this是有所不同的，後者的this是指屬性 或者函數所在的那個對象本身。而這裏this的作用就是將它後面跟着的屬性或者對象綁定到調用者上面。回憶一下JavaScript的new的過程，首先 將創建一個空的對象，然後使用構造函數初始化這個對象，最後返回這個對象。在這個過程中，JavaScript將把this用這個對象替換，也就是把對象 和這些屬性或函數相關聯，看上去就像是這個調用者擁有這個屬性或者函數似的，其實這是this的作用。

這樣看來，show裏面的name和age並沒有關鍵字，但也是可以正常的執 行就會明白怎麼回事了——因爲前面已經用this把name和age與這個對象bill相關聯，並且，show也關聯到這個bill變量，因此 JavaScript是可以找到這兩個變量的。

這樣來看，似乎由this修飾的都是公有變量。事實確實如此，如果你要使一個 變量成爲公有變量，可以使用this。像上面代碼中的name和age都是公有變量，在外面使用aPerson.name或者aPerson.age就可 以訪問到。

2. 私有變量

怎麼聲明一個私有變量呢？事實上就像前面說的，JavaScript根本沒有 私有作用域這一說。那麼來看下面的代碼：

Js代碼

function
 Person(name, age) {
    var
 name = name; 
// 私有屬性
   var
 age = age;
    var
 show = 
function
() { 
// 私
有函數
        alert("name: "
 + name + 
"; age: "
 + age);
    }
}
var
 bill = 
new
 Person(
"Bill"
, 20);
alert(bill.name); // undefined
bill.show(); // error, 不存在

function Person(name, age) { var name = name; // 私有屬性 var age = age; var show = function() { // 私有函數 alert("name: " + name + "; age: " + age); } } var bill = new Person("Bill", 20); alert(bill.name); // undefined bill.show(); // error, 不存在

這段代碼和前面幾乎是相同的，只是把屬性前面的this換成了var。我們知 道，var是用來聲明變量的。show函數和bill.name都是未定義！這是怎麼回事呢？

回憶一下前面說過的JavaScript的new的過程。由於name和 age都是使用var聲明的，JavaScript會將它看作是一個普通的變量，這樣在構造初始化結束之後，構造函數就返回了，變量因超出作用域而訪問不 到。也就是說，我們使用JavaScript變量作用域模擬了私有屬性。

3. 靜態變量

靜態變量是綁定到類上面的。對於不同的對象來說，它們共享一個靜態變量。

Js代碼

Person.num = 0; 
// 靜態屬性
function
 Person() {
    this
.show = 
function
() {
        alert("num: "
 + Person.num);
    };
    Person.num++;
}
var
 bill = 
new
 Person();
bill.show(); // 1
var
 tom = 
new
 Person();
tom.show(); // 2
bill.show(); // 2

Person.num = 0; // 靜態屬性 function Person() { this.show = function() { alert("num: " + Person.num); }; Person.num++; } var bill = new Person(); bill.show(); // 1 var tom = new Person(); tom.show(); // 2 bill.show(); // 2

JavaScript中可以很方便的添加靜態屬性，因爲JavaScript 的對象就是散列，所以只要簡單的在類名後添加一個屬性或者函數即可。

4. 訪問私有變量和公有變量

當對私有變量進行訪問時，只需要使用變量的名字就可以了，但是，如果要訪問公 有變量，則需要使用this關鍵字。

Js代碼

function
 Person(name, age) {
    this
.myName = name;
    var
 myAge = age;
    this
.show = 
function
() {
        alert("show = name: "
 + 
this
.myName + 
"; age: "
 + myAge);
    }
    var
 showAll = 
function
() {
        alert("showAll = name: "
 + 
this
.myName + 
"; age: "
 + myAge);
    }
}
var
 bill = 
new
 Person(
"Bill"
, 20);
bill.show();

function Person(name, age) { this.myName = name; var myAge = age; this.show = function() { alert("show = name: " + this.myName + "; age: " + myAge); } var showAll = function() { alert("showAll = name: " + this.myName + "; age: " + myAge); } } var bill = new Person("Bill", 20); bill.show();

在這裏，如果去掉myName的this關鍵字，就會有未定義屬性的錯誤.

簡單來說，我們需要使用this來聲明公有變量，使用var來聲明私有變量。但是，JavaScript卻不是那麼簡單，因爲JavaScript 是一個腳本語言，我們需要十分關心它的執行效率。下面，我們將會看一下JavaScript面向對象設計的最佳實踐。