javascript—-闭包、this小结

2018-06-18

Javascript 关于闭包、this

js的作用域作用域链，以及闭包

总结下javascript中的一些基本概念点，关于作用域，作用域链，闭包，this，几个相辅相成的东西。
大部分参考的阮一峰大神的博客，话说他的博客写的是真的好，通俗易懂，一气贯通，很容易理解，很多难点又不会像教科书中那样的晦涩，用很直白很容易理解的方式就把东西过了，体验满分。真的特别推荐。

变量的作用域无非就是两种，全局变量和局部变量
js中，函数内部可以直接读取全局变量

var n = 999;
function f1(){
    alert(n)
}
f1();//99

另一方面函数外部自然无法读取函数内部的局部变量

function f1(){
    var n = 999;
}
alert(n)//error

还有一个地方需要注意，函数内部声明变量的时候，一定要用var命令，如果不用的话，你实际上声明了一个全局变量！

function f1(){
    n=999
}
f1();
alert(n)

出于种种原因，我们有时候需要得到函数的局部变量，但是，前面已经说过了，正常情况下变不到，只有通过变通的方法才能实现。
！！！那就是在函数内部，再再再定义一个函数，嘿嘿

function f1(){
    var n = 999;
    function f2(){
        alert(n)//999
    }
}

上面代码中，函数f2就被包括在函数f1内部了，这时f1内部的所有局部变量，对f2都是可见的，但是反过来就不行，f2局部的变量，对f1就是不可见的，这就是javascript语言特有的链式作用域结构（chain scope），子对象会一级一级的向上寻找所有父对象的变量，所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了嘛！！！！！！！！

function f1(){
    var n = 999;
    function f2(){
        alert(n)
    }
    return f2;
}
var result = f1();
result()

这个就是传说中的闭包了，作用域和作用域链的概念也梳理了，
闭包可以用于许多地方，他的两个最大用处就是，可以读取到函数内部的变量。另一个就是让这些变量的值始终保持在内存中。
理解这段话，请看代码

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

这段代码中，result实际上就是闭包f2函数u，一共运行两次，第一次是999，第二次是1000，证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
为什么会这样，想一想
原因在与f1是f2的父函数，而f2被赋予了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制回收(garbage collection)
这段代码中，值得注意的一个地方就是，nAdd=function(){n+=1}这一行，首先在nAdd 千米没有使用var 关键字，因此nAdd是一个全局变量，而不是局部变量，其次，nAdd的值是一个匿名函数，（anonymous function），而这个匿名函数本生也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。
使用闭包的注意点

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

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

想一想

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


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

两段代码如果想清楚了，基本就理解闭包，作用域作用域链了。

接下来就是this的用法啦。

this是javascript语言的一个关键字，
它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用，比如

1
2
3

function test(){
    this.x = 1
}

随着函数使用场合的不同，this的值会发生变化，但是有一个总的原则，那就是this指的是，调用函数的那个对象。
情况一：纯粹的函数调用
这是函数的最通常用法，属于全局性调用，因此this就代表全局对象Global。
例子：

function test(){
    this.x = 1
    console.log(this.x)
}
test();//1

为了证明this 就是全局对象，对代码做了些改动

var x = 1;
　　function test(){
　　　this.x = 0;
　　}
　　test();
　　alert(x); //0

情况二：作为对象方法的调用
函数还可以作为某个对象的方法调用，这时this就指这个上级对象

function test(){
    alert(this.x)
}
var o = {}
o.x = 1
o.m = test
o.m();//1

此时的test函数是被这个o对象调用的，所以this指向这个o对象。向上查找x，所以找到o.x中的属性值等于1，就正确了

情况三作为构造函数调用
所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this，就指向这个新对象。

function test(){
    this.x = 1
}
var o = new test()
console.log(o.x) //1

此时结果任然为1,很明显嘛，为了表明这时this不是全局变量，对代码做一些改变；

var x = 2;
function test(){
    this.x = 1
}
var o = new test()
alert(x);//2

运行结果为2，表明全局变量X的值根本没变

情况四 apply调用
apply()是函数对象的一个方法，它的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象，因此，this指的就是这第一个参数

var x = 0;
function test(){
    console.log(this.x)
}
var o = {}
o.x = 1;
o.m = test
o.m.apply();//0

apply()的参数为空时，默认调用全局对象，因此，这时的运行结果为o，证明this指的是全局对象。
如果把最后一行代码修改为

1	o.m.apply(o); //1

运行结果就变成了1，证明了这时this代表的是对象o。
只要理解好这个函数在哪里调用就可以知道this的指向了，结合作用域，作用域链和闭包，就能很清楚的判断this是全局调用还是对象里调用函数。