JS闭包及容易遇到的坑

JS闭包及容易遇到的坑

闭包指的是：能够访问另一个函数作用域的变量的函数。
清晰的讲：闭包就是一个函数，这个函数能够访问其他函数的作用域中的变量。

要理解闭包，首先必须理解Javascript特殊的变量作用域。
变量的作用域无非就是两种：全局变量和局部变量

function outer() {
     var  a = 99
     nAdd=function(){a+=1}
     var  inner = function () {
            console.log(a)  //99
     }
    return inner    // inner 就是一个闭包函数，因为他能够访问到outer函数的作用域
}
var result=outer();  //result实际上就是闭包inner函数,一共运行了两次
　　result(); // 99
　　nAdd();
　　result(); // 100

result实际上就是闭包inner函数,一共运行了两次。证明了，函数outer中的局部变量n一直保存在内存中，并没有在outer调用后被自动清除。

这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

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

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

　var name = "";
　var object = {
　　　name : "window作用域",
　　　getNameFunc : function(){
　　　　　return function(){
　　　　　　　return this.name;
　　　　　};
　　　}
　};
　console.log(object.getNameFunc()());  //输出 undefined

var name = "window作用域";
var object = {
　　name : "object 作用域",
　　getNameFunc : function(){
　　　　var that = this;
　　　　return function(){
　　　　　　return that.name;
　　　　};
　　}
};
console.log(object.getNameFunc()());  //输出 object 作用域

坑点1： 引用的变量可能发生变化

function outer() {
      var result = []
      for (var i = 0;i<10;i++){
        result[i] = function () {
            console.log(i)  //因为每个闭包函数访问变量i是outer执行环境下的变量i，随着循环的结束，i已经变成10了，所以执行每个闭包函数，结果打印10，...，10
        }
     }
     return result
}

function outer() {
      var result = []
      for (var i = 0; i<10;i++){
        result[i] = (function (num) {
             return function() {
                   console.log(num);   // 此时访问的num，是上层函数执行环境的num，数组有10个函数对象，每个对象的执行环境下的number都不一样
             }
        })(i)
     }
     return result
}

坑点2: this指向问题

var object = {
     name: "object",
     getName: function() {
        return function() {
             console.log(this.name)
        }
    }
}
object.getName()()    // underfined
// 因为里面的闭包函数是在window作用域下执行的，也就是说，this指向windows

坑点3：内存泄露问题
应用程序不再用到的内存，由于某些原因，没有及时释放，就叫做内存泄漏

function  showId() {
    var el = document.getElementById("app")
    el.onclick = function(){
      aler(el.id)   // 这样会导致闭包引用外层的el，当执行完showId后，el无法释放
    }
}

// 改成下面
function  showId() {
    var el = document.getElementById("app")
    var id  = el.id
    el.onclick = function(){
      aler(id) 
    }
    el = null    // 主动释放el
}

技巧1： 用闭包解决递归调用问题

function  factorial(num) {
   if(num<= 1) {
       return 1
   } else {
      return num * factorial(num-1)
   }
}
var anotherFactorial = factorial
factorial = null
anotherFactorial(4)   // 报错 ，因为最好是return num* arguments.callee（num-1），arguments.callee指向当前执行函数，但是在严格模式下不能使用该属性也会报错，所以借助闭包来实现


// 使用闭包实现递归
function newFactorial = (function f(num){
    if(num<1) {return 1}
    else {
       return num* f(num-1)
    }
}) //这样就没有问题了，实际上起作用的是闭包函数f，而不是外面的函数newFactorial