首頁 > web前端 > js教程 > 主體

JavaScript閉包-區塊級作用域與私有變數

黄舟
發布: 2017-01-20 14:21:26
原創
880 人瀏覽過

 塊級作用域

塊級作用域是指在由花括號包裹的代碼區塊中的作用域。在JavaScript中是沒有區塊作用域的。為了理解這個概念,來看下面的例子:

for(var i = 0;i < 10; i++){
  ......
}
alert(i); //结果会输出10
登入後複製

上面的程式碼中,我們在for迴圈中定義了變數i,在C++和Java等程式語言中,迴圈執行結束之後,for迴圈中的i變數會立刻被垃圾回收。但是在JavaScript中,不管是使用循環或某些判斷之後,變數都會一直存在。我們可以從列印結果中看到,for迴圈結束之後印出的值是10。

當在全域環境中使用某個變數進行循環或判斷之後,這個變數可能會影響到函數中的變量,所以在非特殊情況下不要使用全域變量,而且全域變數在作用域鏈的最上層,訪問是最慢的。

解決區塊作用域的方法是使用匿名函數。來看下面的程式碼。

(function(){
  for(var i = 0; i < 10; i++){
    ......
  }
})();
 
// 直接打印i值会报错:i没有定义
alert(i);
 
// i is not defined
function fn(){
  alert(i);
}
fn();
登入後複製

在上面的程式碼中,我們透過將程式碼區塊放入一個匿名函數中,然後馬上呼叫了這個匿名函數。注意到匿名函數之後的一對括號,它表示呼叫匿名函數。你可以在很多JavaScript程式中看到這種寫法。此時,在匿名函數中的變數在使用完之後就會被回收,在匿名函數外部是無法存取這些變數的。

在我們進行團隊開發時,可能會涉及到定義同名的全局變量,所以在開發中我們要養成如下的習慣:將全局變量的代碼放入到一個匿名函數中,並且馬上調用匿名函數,這樣也可以執行全域變數的程式碼,但是這些變數就被控制在我們想要控制的作用域中了。

 私有變數

我們前面在定義一個物件的時候,透過this關鍵字來設定物件的屬性的。透過這種方法設定的屬性我們稱為公共屬性,我們可以透過物件來直接存取這些屬性。

在C++和Java等程式語言中,透過private關鍵字定義一個物件的私有屬性,私有屬性不可以被物件直接存取。那麼在JavaScript中如何定義私有屬性(私有變數)呢?其實也非常簡單,我們只要為物件提供一對set和get方法就可以了。例如下面的程式碼:

function Person(name){
  //此时就没有方法直接访问name这个属性,因为没有this.name
  //要访问name只能通过this.getName和this.setName来访问
  this.setName = function(value){
    name = value;
  }
  this.getName = function(){
    return name;
  }
}
 
var p = new Person("Leon");
alert(p.getName());
登入後複製

我們透過this.setName()方法來為物件設定name屬性,使用this.getName方法來取得物件的name屬性。這樣,物件的name屬性就是不可以直接存取的,因為沒有this.name屬性。

使用上面這種方式創建私有變數帶來的問題是每個物件都儲存大量的函數,會消耗很多記憶體。解決這個問題的方法是使用靜態私有變數。程式碼如下:

var name = "";
var Person= function(value){
  name = value;
}
Person.prototype.setName = function(value){
  name = value;
}
Person.prototype.getName = function(){
  return name;
}
 
var p1 = new Person("Leon");
alert(p1.getName());
p1.setName("Ada");
alert(p1.getName());
登入後複製

透過將setName()和getName()方法放入物件的原型鏈中,就可以解決方法的多個拷貝的問題。但是上面的程式碼存在一些安全隱患,就是我們前面所說的塊級作用域問題。同樣我們可以將這段程式碼放入匿名函數中來解決這個問題。

(function(){
  //name在函数结束之后就被回收,在外面是没有方法接收的
  var name = "";
  Person= function(value){
    name = value;
  }
  Person.prototype.setName = function(value){
    name = value;
  }
  Person.prototype.getName = function(){
    return name;
  }
})();
 
var p1 = new Person("Leon");
alert(p1.getName());
p1.setName("Ada");
alert(p1.getName());
登入後複製

將Person類別的定義放入到一個匿名函數中,然後立刻執行該匿名函數。這樣不但確保了無法使用物件直接存取屬性,也使得每個物件都共享同一份方法的拷貝。

以上就是JavaScript閉包-區塊級作用域與私有變數的內容,更多相關內容請關注PHP中文網(www.php.cn)!


來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板