Js基础-闭包
在介绍闭包之前,我们先看看是什么全局变量和局部变量
全局变量和局部变量
局部变量:定义在函数内部的变量(只能在内部被访问) 形参也是一种局部变量
全局变量:不在函数内部定义的变量, 就称为全局变量,全局变量在任何函数内都可以被访问和修改
假如我们在函数内部 定义了一个和外部相同名字的变量, 那么在函数内部是用的哪个变量呢?
<script>
var ccc = 5;
function inner() {
var ccc = 4;
console.log(ccc);
}
inner();
</script>
以上结果会输出4 , 因为在执行过程中, 会由内向外寻找变量的定义,所以局部变量在函数内部比全局变量更有优先被使用的权力
再看一个例子, 假如我们打印外部的ccc变量会输出什么?
<script>
var ccc = 5;
function inner() {
var ccc = 4;
}
inner();
console.log(ccc);
</script>
上面的例子会输出 5, 因为函数内部定义的变量无法被外部看到
我们再来看一个比较奇葩的例子
<script>
var ccc = 5;
function inner() {
ccc += 1;
var ccc = 4;
console.log(ccc);
}
inner();
</script>
这个例子第一次打印会输出 NaN , 第二次打印会输出 4
第二次打印好理解, 因为我们已经知道局部变量优先被使用。
第一次比较奇怪, 按道理讲, 在函数内部也应该能引用到外部的全局变量ccc,但是程序的运行结果和我们的推断相反,这是因为js语言有个比较坑的知识点;即在函数执行前,语法规定把变量的定义提升到 函数的前面。
上面的例子在运行的时候浏览器是这么理解的
<script>
var ccc = 5;
function inner() {
var ccc = undefined;
ccc += 1;
ccc = 4;
console.log(ccc);
}
inner();
</script>
这种特性就叫做函数变量提升, 把一个后面定义变量, 提升到前面,因为前面有这个地方的引用。
局部函数
一个函数内部也可以定义另一个函数内部
<script>
function outer() {
function inner() {
console.log("innser函数")
}
inner()
}
outer();
</script>
上面的inner() 函数只能再 outer() 函数内部调用
特别注意
如果不加修饰词定义一个变量的话, 此变量将被视为全局变量,即使它定义在了函数内部
<script>
function fa() {
quanju = 10;
}
fa();
console.log(quanju);
</script>
闭包
概念
从概念上讲,闭包就是一个函数以及捆绑在此函数周围环境状态的引用组合, 每创建一个函数都会产生一个闭包
这个定义比较抽象,下面,我们举个栗子
<script>
function outter(){
var cons = '常量小常'
return function() {
return cons;
}
}
// 得到外部函数的内部函数
var consFun= outter(1,2);
// 执行内部函数
consFun();
</script>
这个例子最终会输出 ‘常量小常’, 虽然内部函数是在外部执行的, 但它依然能够找到定义时候的一些常量值。这个就是一种闭包的表现形式
换句话说,就是函数在执行的时候,能够还原它定义时所处的环境,能够按照定义时候的样子去执行
模拟私有变量
很多语言都支持私有变量, 就是将一个变量或者方法声明为私有,只能被内部使用,外部要想使用只能通过定义的一些公共方法访问
Js原生不支持这种语法,但可以通过闭包模拟这种私有变量的特性
下面就是一个闭包模拟私有变量的例子 , privateCounter 变量不能直接被外部访问,只能通过特定的方法操作。这个例子来源于此:
用闭包模拟私有变量
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures#用闭包模拟私有方法
<script>
var Counter = (function () {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function () {
changeBy(1);
},
decrement: function () {
changeBy(-1);
},
value: function () {
return privateCounter;
},
};
})();
console.log(Counter.value()); /* logs 0 */
Counter.increment();
Counter.increment();
console.log(Counter.value()); /* logs 2 */
Counter.decrement();
console.log(Counter.value()); /* logs 1 */
</script>