Js中的闭包问题

目录

        1.什么是闭包

        2.词法作用域             

        3.闭包

        4.最常用的闭包

---

        1.什么是闭包

                        一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。

        2.词法作用域             

function init() {
  var name = "Mozilla"; // name 是一个被 init 创建的局部变量
  function displayName() { // displayName() 是内部函数，一个闭包
      alert(name); // 使用了父函数中声明的变量
  }
  displayName();
}
init();

                        这里在init()函数内部声明了变量name，但是在displayName()函数内部并没有声明name，但是可以把init()内部声明的name看坐是displayName()函数的全局变量。所以displayName()可以访问到父函数init()内部声明的变量。

        3.闭包

function init() {
  var name = "Mozilla"; // name 是一个被 init 创建的局部变量
  function displayName() { // displayName() 是内部函数，一个闭包
      alert(name); // 使用了父函数中声明的变量
  }
  return displayName();
}
let fn = init()
fn()

                        这段代码和第一个init()函数实例完全一样。其中不同的地方就是第二个函数在displayName()执行前，就会从函数内部返回。

                        再看下下面这段代码

function add(x){
    return function(y){
        return x+y
    }
}

let add2 = add(2)
let add5 = add(5)

console.log(add2(3))    //5
console.log(add5(10))    //15

                        这里将add()函数的返回值赋值拿出来。相当于得到了function(y){ return 2+y } 和 function(y){ return 5+y } 。然后再通过赋值的函数参数y，得到最后的输出结果。如果我们在第一步函数返回值赋值时，没有给参数2或者5或者是其他的数字，就会照成结果输出为NaN。就相当于上面我得到的返回值都是在以add()参数为2或5的情况下的。

        4.最常用的闭包

function add(x,y){
    return function(){
        console.log(x+y)
    }
}

let func1 = add(2,3)
let func2 = add(5,10)

func1()        //5
func2()        //15

                        这种就是将参数有实际对象的应用方法联系起来，目前看到的是一个两个数相加。也可以设置其他的属性，比如说设置盒子模型的宽高等等，完全可以通过这种闭包的方式，根据不同的情景给予不同的参数，以便达到想要的效果。

                        闭包好处很多，但是我们也需要了解到它的弊端，很容易会照成浏览器内存泄漏，严重的会让浏览器挂死。