浅谈作用域和闭包

2017-11-02

函数作用域和块级作用域

任何程序设计语言都有作用域的概念，简单的说，作用域就是变量或函数的作用范围。在JavaScript中，变量的作用域有全局作用域和局部作用域两种，并且局部作用域是按照函数划分的，而不是块级作用域，下面我们就来详细区分一下这些作用域。

1.在Java、C或C++中，花括号{}内封闭的代码块有自己的作用域，在{}外部无法访问{}内部的变量，这个作用域就称为块级作用域。

2.在javascript中不存在块级作用域，而是把每个函数作为一个作用域，在函数外部无法访问函数内部的变量。

3.为了解决块级作用域，ES6引入了新的关键字let，用let替代var可以声明一个块级作用域的变量。

来个例子

function test() {
    if (true){
     var color="blue";
    } 
     alert(color);
}

分析：

在Java、C或C++中，if语句内部是一个块作用域，color变量在if语句中声明，并在if语句执行完毕后被销毁，即就是说if语句外部不可访问内部的变量，因此本例alert(color)将出现报错undefined。

在javascript中，test()函数内部是一个函数作用域，由于没有块作用域，if语句中的变量声明也属于当前的函数作用域，alert命令在该作用域内部，可以访问color变量，因此本例alert(color)将输出“blue”。

再来个例子：

function test() {
for(var i=0; i<10;i++){
    doSomething(i);
}
alert(i);
}

在Java、C或C++中，for语句内部是一个块作用域，其初始化变量的表达式所定义的变量（本例中是变量i），只会存在于循环的环境之中（即该块作用域），因此本例alert（i）将出现报错undefined。

在javascript中，test()函数内部是一个函数作用域，由于没有块作用域，由for语句创建的变量i即使在for循环执行结束后也依旧会存在于循环外部的函数作用域中，因此本例alert（i）将输出10。

如果本例中用let替代var定义变量i，那么alert（i）也会报错，因为用let替代var可以声明一个块级作用域的变量。

模仿块级作用域（私有作用域）

(function(){  //括号使函数声明转换成函数表达式，就可以直接调用函数了
    //这里是块级作用域
})（）；// 里面的变量会在函数执行结束时销毁

私有变量：任何在函数中定义的变量，包括函数参数，函数局部变量，函数内部定义的其他函数

特权方法：有权访问私有变量和私有函数的公有方法

创建方法（为自定义类型）：

1.在构造函数中定义特权方法。

function MyObject(){
//私有变量和私有函数
var privateVariable =10;
function privateFunction(){
    return false;
}

//特权函数
this.publicMethod = function(){
    privateVariable++;
    return privateFunction();
};
}

2.通过在私有作用域中定义私有变量或函数。

(function(){
var privateVariale = 10;
function privateFunction(){
     return false;
}
MyObject = function(){
};
MyObject.prototype.publicMethod = function(){
    privateVariale++;
    privateFunction();
}
})();

为单例创建

模块模式：为单例创建私有变量和特权方法，单例就是只有一个实例的对象（js以对象字面量方式创建）。

var singleton={

//私有变量和私有函数
var privateVariable = 10;
function privateFunction(){
    return false;
}
//特权/公有方法和属性
return{
    publicProperty:true;
    publicMethod:function(){
        privateVariable++;
        privateFunction();    
    }
}
};

这种模式用在需要对单例进行初始化，又需要维护其私有变量时有用。

全局作用域

在代码中任何地方都能访问到的对象拥有全局作用域，一般来说以下3种变量对象拥有全局作用域：

1.最外层函数和在最外层函数外面定义的变量。

2.所有未定义直接赋值的变量将被自动添加到全局作用域（但是严格模式下，初始化未经声明的变量会导致错误）。

3.所有window对象的内置属性，例如window.name、window.location、window.top等等都是全局变量，并且所有属于全局作用域的变量都是window对象的属性。

此处应有例子

var a=1;
function test() {
var b =2;
c=3;
alert("执行了test1函数");
}
alert(a);    //输出1，因为变量a是最外层函数外面定义的变量
alert(b);    //报错undefined
test();      //弹出“执行了test1函数”，因为test()是最外层函数
alert(c);    //输出3，因为未定义直接赋值的变量将被自动添加到全局作用域
alert(window.location);  //弹出了文档当前地址和相关信息，因为window的内置属性是全局变量
alert(window.a);         //输出1，因为全局作用域变量a也是window对象的属性

注意：如果在调用test()之前alert(c)会报错，因为你如果没有调用过这个函数，浏览器根本不会读取到函数里面的这个变量c。

局部作用域

只在函数内部才能访问到的对象拥有局部作用域。

例子来喽：

function test() {
var b =2;
alert(b);
}
alert(b); //报错undefined，因为这个alert命令位于函数外部，访问不到函数内部的变量b
test();   //2，因为调用这个函数时，执行了函数内部的alert命令，可以访问到变量b

作用域链

前面的例子都很好理解，因为我定义的变量都是不同的，互不干扰，但是如果局部变量跟全局变量重名了就会比较难以判断。

再来一次

var a =1;
function test(){
alert(a);
var a = 2;
alert(a);
}
test();  //undefined,2

估计很多人都会以为在调用test()函数时会弹出1，2，但事实上弹出了undefined,2，要理解其中的缘由，那必须理解作用域链。

概念：

作用域链的作用就是保证对作用域内有权访问的变量和函数的有序访问。通俗地说，作用域链可以被看作一种有秩序的路径,在变量解析过程中首先查找当前局部的作用域，然后查找上层作用域，由内到外地查找，直到到找到最近定义的的该变量。

那么现在再去理解一下上面的例子，第一次alert(a)的时候，先在当前作用域中也就是函数test()内部查找到变量a已经被定义，但是此时并没有赋值，所以输出undefined；第二次alert(a)的时候，当前局部作用域中查找到已经赋值的变量a,所以输出2。

var a =1;
function test(){
var b = 2;
alert(a);
alert(b);
alert(c);
function test2() {
    var c = 3;
}
}
test();  //1,2,undefined

1.alert(a)：当前局部作用域test()内部查找变量a没有找到，上层全局作用域查找到a =1，输出1。

2.alert(b)：当前局部作用域test()内部查找变量b得到b=2，输出2。

3.alert(c)：当前局部作用域test()内部查找变量c没有找到，上层全局作用域也没有找到，输出undefined。

另外，从作用域链的结构可以看出，被访问的对象所在的位置越深，读写速度就会越慢。因为全局变量总是存在于作用域链的最末端，因此查找全局变量是最慢的。所以，在编写代码的时候应尽量少使用全局变量，多使用局部变量。

闭包

闭包：指有权访问另一个函数作用域中的变量的函数。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

用途：

1.是可以读取函数内部的变量

2.是让这些变量的值始终保持在内存中。

function f1(){
    var n=999;
    nAdd=function(){n+=1}
    function f2(){
    alert(n);
}
return f2;
}
    var result=f1();
    result(); // 999
    nAdd();
    result(); // 1000

闭包只能取得包含函数中任何变量的最后一个值，要想让它返回循环中的每个值，可以使用如下方式

function creat(){
var result=new Array();
for(var i=0;i<10;i++){
    result[i]=function(num){
    return function(){
        return num;};
    }(i); //立即执行该函数，将i的值赋给num
}
return result;
}

注意点

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露(HTML元素无法被销毁)。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

this对象

this 对象是在运行时基于函数的执行环境绑定的。

在全局函数中，this等于window；当函数被作为某个对象的方法
调用时，this等于那个对象；不过匿名函数的执行环境具有全局性，因此其this对象通常指向window。

var name = "The Window";
var object = {
    name : "My Object",
    getNameFunc : function(){
        return function(){
        return this.name;
    };
    }
};
alert(object.getNameFunc()());// "The window（非严格模式下）"

如果想让闭包访问到其包含环境中的this对象，可以这样写：

var name = "The Window";
    var object = {
    name : "My Object",
        getNameFunc : function(){
        var that = this;
            return that.name;
        };
      }
    };
alert(object.getNameFunc()()); //"My Object"