Example:计数器困境
- 设想下如果你想统计一些数值,且该计数器在所有函数中都是可用的。
你可以使用全局变量,函数设置计数器递增:
var counter = 0;
function add() {
return counter += 1;
}
add();
add();
add();
计数器数值在执行 add() 函数时发生变化。
但问题来了,页面上的任何脚本都能改变计数器,即便没有调用 add() 函数。
- 如果我在函数内声明计数器,如果没有调用函数将无法修改计数器的值:
function add() {
var counter = 0;
return counter += 1;
}
add();
add();
add();
// 本意是想输出 3, 但事与愿违,输出的都是 1 !
JavaScript内嵌函数
实际上,在 JavaScript 中,所有函数都能访问它们上一层的作用域。JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。该实例中,内嵌函数 plus() 可以访问父函数的 counter 变量:
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
如果我们能在外部访问 plus() 函数,这样就能解决计数器的困境。
我们同样需要确保 counter = 0 只执行一次。 我们需要闭包。
闭包的使用例子
闭包:
1.闭包是可访问上一层函数作用域里变量的函数,即便上一层函数已经关闭。
2.或简单理解为定义在一个函数内部的函数,内部函数持有外部函数内变量的引用
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
add();
add();
add();
// 函数自调用的写法
// 计数器为 3
为什么上面这段代码没有直接写的 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执行时创建的变量。
另一种理解方式:将以上代码分解
function outerFunction() {
var counter = 0;
function innerFunction(){
return counter += 1;
}
return innerFunction;
/*
注意 typeof innerFunction 是:function;而typeof innerFunction()是number;
*/
}
var add = outerFunction();
/*
调用 outerFunction()返回的是内部函数innerFucntion,那么调用几次add()将调用几次
内部函数inner Function,内部函数公用了counter,所以能够计数,所以说闭包就是将内部嵌套函数变成外部可调用的。
*/
add();
add();
add();
如之前嵌套函数想实现的一样,我们做的实际是想调用内嵌的函数。
而每次调用outerFunction()时都重新声明了一个counter,这个互不影响
不使用闭包而是使用构造函数
自己定义一个构造函数,有自己的属性和方法,然后局部计算,操作自己定义的属性
var newAdd = function() {
this.count = 0;
this.addAdd = function(){
this.count = this.count + 1;
return this.count;
}
}
var addCount1 = new newAdd();
var addCount2 = new newAdd();
// 声明两个,两个的Count也互不干扰
function myFunction3(){
document.getElementById("demo3").innerHTML = addCount1.addAdd();
}
function myFunction3(){
document.getElementById("demo3").innerHTML = addCount2.addAdd();
}