关于前端:你很懂闭包嘛

闭包是什么？

什么是闭包？是函数外面 return 函数？；是外部函数能够拜访到其所在内部函数中申明的参数和变量？；要真正的了解闭包咱们就要先去了解作用域。

作用域

什么是作用域，简略的来说就是这个变量能够应用的范畴，也就是在程序中咱们能够调用的范畴。作用域能够分为函数作用域（部分作用域）, 全局作用域。

全局作用域

全局作用域就是能够被全局拜访和应用的全局变量。长处是能够反复的应用，毛病是容易呈现谬误，变量容易呈现被其余的中央篡改，代替的问题。一般来说没有在函数的的大括号之内申明的变量个别都会是全局作用域范畴的全局变量。比方在最外层申明的函数和变量,window 对象内置的属性和办法也都是全局的，还有没有申明间接定义值的也会被主动定义为全局对象。

    function nameFn(){
       name='a';
        window.alert("我是全局的办法")
    }
    nameFn();
    var nameOne='b';

如下图一样，咱们能够看到在浏览器的调试 scope 中三种类型的值都在全局的 scope 中。

函数作用域

函数作用即部分作用域，内部无法访问到该作用域内的变量和办法，外面的变量也就是局部变量个别会随着内部函数的隐没而被隐没，被浏览器的垃圾回收机制所回收。函数作用域中的所申明的变量就是局部变量（蕴含的函数的参数）。长处是不会被净化，毛病是不能够重复使用。

作用域链

当多重的作用域嵌套的时候就会产生一个由里向外的作用域链。作用域链的规定是:js 引擎从以后执行的作用域开始，先查看以后作用域是否存在，若如果不存在则持续向外寻找，间接找到最外层的全局作用域，才会进行查找。

作用域小测

// 第一题 四个 console 会输入什么？console.log(a)
if(false){var a='我是一个什么变量？';}
console.log(a)

console.log(b)
function test(){var b='我又是一个什么变量？';}
test();
console.log(b)

// 第二小题
var a=10
function test(){
  var a=100
  a++
  console.log(a)
}
test();
console.log(a)

var b=10;
function test(){
  b=100
  b++
  console.log(b)
}
test()
console.log(b)

在第一小题中，a是两个都是 undefined。因为在条件判断的大括号中，不产生作用域，所以a 是全局变量, 又因为变量提醒的起因，所以提前申明到了后面，然而因为条件判断是false，没有进行赋值，所以等于undefined。b 则会报错，因为在函数作用域外部申明，所以是局部变量，无奈进行拜访。

在第二小题 a 的console的后果是 101 和 10。第一个 a 因为都晓得在 a ++ 后变成了 101，第二个 a 是 10，a++ 曾经在本级的作用域找到了局部变量 a，所以不会向下层的作用域找了，把局部变量 a 变成了 101，函数执行后，局部变量就隐没了，所以里面的 console 就是 10。b 的 console 的打印的后果是101 和 101，因为在函数中没有申明只是赋值了，所以是全局变量，所以都是 101。

而后咱们再看看一道有点意思的题目。

var a=10
function test(a){
     a++;
     console.log(a)
}
test(a)
console.log(a)

这道题中，第一个 console 打印的是 11，第二个 console 打印又成了 10，因为咱们传入的参数也是一个局部变量，所以会 a ++ 后隐没，所以第二个打印的是外层的全局变量 a，它的值是 10。

看完作用域后咱们发现，全局作用域的全局变量能够重复使用，却容易被净化，函数作用域的局部变量不会被净化却会随函数执行而隐没，不能够重复使用，那怎么能够即重复使用又不容易被净化呢？答案就是 闭包。

闭包

闭包的定义

什么是闭包呢？咱们先来看下官网解释。

1. 小 ” 黄 ” 书(你不晓得的 JavaScript): 当函数能够记住并拜访所在的词法作用域时, 就产生了闭包, 即便函数是在以后词法作用域之外执行.
2. 红宝书(JavaScript 高级程序设计): 闭包是指有权拜访另一个函数作用域中的变量的函数.
3.MDN: 闭包（closure）是一个函数以及其捆绑的周边环境状态（lexical environment，词法环境）的援用的组合。

function f1(){
    var a=10
   function f2(){
      a++;
      console.log(a)    
    }
    return f2;
}
var retult= f1();
 retult()//11
 retult()//12

咱们间接上案例，咱们能够看到咱们的变量不会随着函数执行完结而隐没。能够始终被重复使用，那么什么是闭包呢，我的了解是外层的作用域中局部变量被外面的函数作用域链所牵引，不会随函数执行隐没，从而产生闭包。

闭包的用处

闭包能够用在许多中央。它的最大用途有两个，一个是后面提到的能够读取函数外部的变量，另一个就是让这些变量的值始终保持在内存中。下面的代码就曾经反映进去了闭包的两个作用。

闭包的缺点

因为闭包会使得函数中的变量都被保留在内存中，内存耗费很大，所以不能滥用闭包，否则会造成网页的性能问题，在 IE 中可能导致内存泄露。解决办法是，在退出函数之前，将不应用的局部变量全副删除。

闭包小测

function f1(){function f2(){
        var a=10;
        a++;
        console.log(a)
    }   
    return f2;
}
var result=f1();
result();//11
result();//11

因为用的是函数作用域中的变量，所以没有产生闭包。不会被保留下来，都是 11.

 var name = "The Window";
  var object = {
    name : "My Object",

    getNameFunc : function(){return function(){return this.name;};

    }

  };
let result=object.getNameFunc()
console.log(result());//The Window

为什么是这个答案呢？因为咱们 result 在 window 中被调用，所以 this 指向的是 window，所以 this.name 指向的是全局的 name。

var a = 2;
var obj = {
    a: 4,
    f1: (function () {
        this.a *= 2;
        var a = 3;
        return function () {
            this.a *= 2;
            a *= 3;
            console.log(a);
        };
    })(),};
var f1 = obj.f1;
console.log(a);//4
f1();//9
obj.f1();//27

第一个 a 是 4，因为咱们 f1 是一个自执行函数，所以 f1 被执行 this.a 被 * 2 所以等于 4，这个也是因为 this 指向 window，所以调用的是全局的 a，和下面一个题一样的情理。function 的 a 没有，所以向外找，在 f1 中找到了 a，进行寻找。因为调用的内部的函数中的变量所以不会随函数执行而隐没，所以始终累乘，呈现 9 和 27.

（完）。