JavaScript闭包-块级作用域和私有变量 - Web前端

块级作用域是指在由花括号包裹的代码块中的作用域。在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教程主目录>>