该文部分代码和内容节选自菜鸟教程,仅用作个人学习,特此声明
链接:https://www.runoob.com/
设想下如果你想统计一些数值,且该计数器在所有函数中都是可用的。
你可以使用全局变量,函数设置计数器递增:
1 2 3 4 5 6 7 8 9 10 11 | var counter = 0; function add() { return counter += 1; } add(); add(); add(); // 计数器现在为 3 |
计数器数值在执行 add() 函数时发生变化。
但问题来了,页面上的任何脚本都能改变计数器,即便没有调用 add() 函数。如果我在函数内声明计数器,如果没有调用函数将无法修改计数器的值
1 2 3 4 5 6 7 8 9 10 | function add() { var counter = 0; return counter += 1; } add(); add(); add(); // 本意是想输出 3, 但事与愿违,输出的都是 1 ! |
JavaScript 内嵌函数可以解决该问题。
所有函数都能访问全局变量。
实际上,在 JavaScript 中,所有函数都能访问它们上一层的作用域。
JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。
以下实例中,内嵌函数 plus() 可以访问父函数 add() 的 counter 变量:
1 2 3 4 5 6 | function add() { var counter = 0; function plus() {counter += 1;} plus(); return counter; } |
如果我们能在外部访问 plus() 函数,这样就能解决计数器的困境。我们同样需要确保 counter = 0 只执行一次。
这个时候JavaScript闭包就派上用场了。
首先,我们来回忆一下之前学过的自调用函数
1 2 3 4 5 6 7 8 9 10 | var add = (function () { //该自调用函数只执行一次 var counter = 0; //设置计数器为0 return function () {return counter += 1;} //返回函数表达式 })(); add();//1 add();//2 add();//3 // 计数器为 3 |
我们来分析一下上边的这个自调用函数实例
这个实例就展示了函数的闭包,它使函数拥有私有变量成为可能。闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。
它的保护原理就是只有通过add才能访问add的上一层作用域的私有变量counter
我的个人理解是返回的函数表达式就是add(这样说可能不太严谨),该函数表达式的上一层作用域自然就是自调用函数的作用域,故该函数表达式也就是add自然就可以访问自调用函数的私有变量counter了,并且只有add可以访问这个私有变量,从而起到了所谓的闭包保护作用
很多人看到最后这个计数器问题都会感到困惑, 我也一样。经过代码验证, 发现其中的奥妙在于:
1 2 3 4 | var add = (function () { var counter = 0; return function () {return counter += 1;} })(); |
注意: 为什么上面这段代码没有直接写的 function add (){...} 而是把function赋值给了变量add呢?
我们通常会想当然的认为每次调用 add() 都会重走一遍add()中的代码块, 但其实不然。
注意add方法中的return, 它return的并不是1,2,3这样的数值,而是return了一个方法,并且把这个方法赋值给了add变量。
那么在这个function自运行一遍之后,其实最后赋值给add的是return counter += 1 这段代码。
所以后面每次调用add() 其实都是在调用return counter += 1。
再结合文章之前所说的, 闭包会持有父方法的局部变量并且不会随父方法销毁而销毁, 所以这个counter其实就是来自于第一次function执行时创建的变量。
理解闭包可以将以上代码分解如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | function outerFunction() { var counter = 0; function innerFunction(){ return counter += 1; } return innerFunction; /* 注意 typeof outerFunction 是:function;而typeof innerFunction()是number; */ } var add = outerFunction(); /* 调用 outerFunction()返回的是内部函数innerFucntion,那么调用几次add()将调用几次 内部函数inner Function,内部函数公用了counter,所以能够计数,所以说闭包就是将内部嵌套函数变成外部可调用的。 */ add(); add(); add(); |
多看看 JavaScript 闭包 | 菜鸟教程 (runoob.com) 下边别人发表的笔记加深闭包理解