[ JS 进阶 1] 作用域链，闭包，内存----作用域和 this 关键字

一、作用域（scope）

二、作用域链（scope chain）（scope）

三、this 关键字（scope）

四、实战应用（scope）

一、作用域（scope）

所谓作用域就是：变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。

function scope(){
    var foo = "global";
    if(window.getComputedStyle){
        var a = "I'm if";
        console.log("if:"+foo); //if:global
    }
    while(1){
        var b = "I'm while";
        console.log("while:"+foo);//while:global
        break;
    }
    !function (){
        var c = "I'm function";
        console.log("function:"+foo);//function:global
    }();
    console.log(
         foo,//global
         a, // I'm if b, // I'm while
         c  // c is not defined
    );
}
scope();

（1）scope函数中定义的foo变量，除过自身可以访问以外，还可以在if语句、while语句和内嵌的匿名函数中访问。 因此，foo的作用域就是scope函数体。

（2）在javascript中，if、while、for 等代码块不能形成独立的作用域。因此，javascript中没有块级作用域，只有函数作用域。

但是，在JS中有一种特殊情况：

如果一个变量没有使用var声明，window便拥有了该属性，因此这个变量的作用域不属于某一个函数体,而是window对象。

function varscope(){
    foo = "I'm in function";
    console.log(foo);//I'm in function
}
varscope();
console.log(window.foo); //I'm in function

二、作用域链（scope chain）（scope）

所谓作用域链就是：一个函数体中嵌套了多层函数体，并在不同的函数体中定义了同一变量， 当其中一个函数访问这个变量时，便会形成一条作用域链（scope chain）。

foo = "window";
function first(){
    var foo = "first";
    function second(){
       var foo = "second";
       console.log(foo);
    }
    function third(){
       console.log(foo);
    }
    second(); //second
    third();  //first
}
first();

当执行second时，JS引擎会将second的作用域放置链表的头部，其次是first的作用域，最后是window对象，于是会形成如下作用域链：
second->first->window, 此时，JS引擎沿着该作用域链查找变量foo, 查到的是”second”
当执行third时，third形成的作用域链：third->first->window, 因此查到的是：”frist”

当代码在一个环境中执行时，会创建变量对象的一个作用域链（scope chain,不简称sc）来保证对执行环境有权访问的变量和函数的有序访问。作用域第一个对象始终是当前执行代码所在环境的变量对象（VO）

function a(x,y){
            var b=x+y;
            return b;
        }

在函数a创建的时候它的作用域链填入全局对象,全局对象中有所有全局变量

如果执行环境是函数，那么将其活动对象（activation object, AO）作为作用域链第一个对象，第二个对象是包含环境，下一个是包含环境的包含环境。。。。。

function a(x,y){
            var b=x+y;
            return b;
        }
        var tatal=a(5,10);

这时候 var total=a(5,10);语句的作用域链如下

在函数运行过程中标识符的解析是沿着作用域链一级一级搜索的过程，从第一个对象开始，逐级向后回溯，直到找到同名标识符为止，找到后不再继续遍历，找不到就报错。

再来看看闭包
之前博客曾经总结道：只要存在调用内部函数的可能，JavaScript就需要保留被引用的函数。而且JavaScript运行时需要跟踪引用这个内部函数的所有变量，直到最后一个变量废弃，JavaScript的垃圾收集器才能释放相应的内存空间。回头再看看好理解了很多，父函数定义的变量在子函数的作用域链中，子函数没有被销毁，其作用域链中所有变量和函数就会被维护，不会被销毁。

for(var i=0;i<elements.length;i++){
                elements[i].onclick=function(){
                    alert(i);   //每次都是length
                }
            }

这是上篇博客提到过的经典错误，每次element点击alert都是length，这段代码中为element绑定的click事件处理程序的作用域链是这样的

由于内部函数（click事件处理程序时刻有调用可能），所以其作用域链不能被销毁（更别说本例中i在全局作用域中，只能页面卸载是销毁），i的值一直保持for循环执行完后的length值，所以每次触发onclick的时候才会alert length。

for(var i=0;i<elements.length;i++){
                (function(n){
                    elements[n].onclick=function(){
                        alert(n);
                    }
                })(i);
            }

为什么这样就行了呢，这时候onclick引用的变量变成了n，而由于立即执行函数的原因，每个onclick函数在作用域链中分别保持着对应的n（0~length-1），这时候就可以了。
解析：
第一种方式在页面加载后就会执行，当i的值为4的时候，判断条件不成立，for循环执行完毕，但是因为每个span的onclick方法这时候为内部函数，所以i被闭包引用，内存不能被销毁，i的值会一直保持4，直到程序改变它或者所有的onclick函数销毁（主动把函数赋为null或者页面卸载）时才会被回收。这样每次我们点击span的时候，onclick函数会查找i的值（作用域链是引用方式），一查等于4，然后就alert给我们了。
第二种方式是使用了一个立即执行的函数又创建了一层闭包，函数声明放在括号内就变成了表达式，后面再加上括号括号就是调用了，这时候把i当参数传入，函数立即执行，num保存每次i的值。
其实理解了执行环境和作用域链后，闭包翻了变成显而易见的东西，但是也不能滥用闭包，从上面例子可以看出，闭包会使子函数保持其作用域链的所有变量及函数与内存中，内存消耗很大，在使用的时候尽量销毁父函数不再使用的变量。

再举闭包的例子

function sayName(name){
    return function(){
        return name;
    }
}
var say = sayName('jozo');

在匿名函数从sayName()函数中被返回后，它的作用域链被初始化为包含sayName()函数的活动对象和全局变量对象。这样，匿名函数就可以访问在sayName()中定义的所有变量和参数，更为重要的是，sayName()函数在执行完毕后，其活动对象也不会被销毁，因为匿名函数的作用域链依然在引用这个活动对象，换句话说，sayName()函数执行完后，其执行环境的作用域链会被销毁，但他的活动对象会留在内存中，知道匿名函数会销毁。这个也是后面要讲到的内存泄露的问题。

特殊情况：with语句

JS中的with语句主要用来临时扩展作用域链，将语句中的对象添加到作用域的头部。with语句结束后，作用域链恢复正常。

foo = "window";
function first(){
    var foo = "first";
    function second(){
       var foo = "second";
       console.log(foo);
    }
    function third(obj){
       console.log(foo); //first
       with (obj){
           console.log(foo); //obj
       }
       console.log(foo); //first
    }
    var obj = {foo:'obj'};
    third(obj);
}
first();

在执行third()时，传递了一个obj对象，obj中有属性foo, 在执行with语句时，JS引擎将obj放置在了原链表的头部，于是形成的作用域链如下：
obj->third->first->window, 此时查找到的foo就是obj中的foo,因此输出的是：”obj”, 而在with之前和之后，都是沿着原来的链表进行查找，从而说明，在with语句结束后，作用域链已恢复正常。

三、this 关键字（scope）

1.在一个函数中，this总是指向当前函数的所有者对象
2.this总是在运行时才能确定其具体的指向, 也才能知道它的调用对象。

这句话总结了关于this的一切，切记，切记，切记!（ps:重要的事情说三遍!）

window.name = "window";
function f(){
    console.log(this.name);
}
f();//window

var obj = {name:'obj'};
f.call(obj); //obj

在执行f()时，此时f()的调用者是window对象，因此输出”window”
f.call(obj) 是把f()放在obj对象上执行，相当于obj.f(),此时f中的this就是obj,所以输出的是”obj”

四、实战应用（scope）

code1：

var foo = "window";
var obj = {
    foo : "obj",
    getFoo : function(){
        return function(){
            return this.foo;
        };
    }
};
var f = obj.getFoo();
f(); //window

code2:

var foo = "window";
var obj = {
    foo : "obj",
    getFoo : function(){
        var that = this;
        return function(){
            return that.foo;
        };
    }
};
var f = obj.getFoo();
f(); //obj

code1和code2是对this和scope最好的总结

代码解析：
code1:
执行var f = obj.getFoo()返回的是一个匿名函数，相当于:

var f = function(){
     return this.foo;
}

f() 相当于window.f(), 因此f中的this指向的是window对象，this.foo相当于window.foo, 所以f()返回”window”

code2:
执行var f = obj.getFoo() 同样返回匿名函数，即：

var f = function(){
     return that.foo;
}

唯一不同的是f中的this变成了that, 要知道that是哪个对象之前，先确定f的作用域链：f->getFoo->window 并在该链条上查找that,此时可以发现that指代的是getFoo中的this, getFoo中的this指向其运行时的调用者，从var f = obj.getFoo() 可知此时this指向的是obj对象，因此that.foo 就相当于obj.foo,所以f()返回”obj”