1. Alcance variable
1. Variables globales
1. Las variables globales se pueden usar dentro de la función
2. Las variables locales en la función no se pueden usar fuera de la función
3. Cuando se ejecuta la función, las variables locales en el alcance serán destruidas
2. Variables locales
1. El interior de la función es la variable local
2. Cierre
Los cierres son funciones que tienen acceso a variables en el ámbito de otra función.
(Es decir, un alcance puede acceder a la variable local dentro de otra función).
Si hay una variable local a dentro de una función, otro alcance b (ya sea un alcance global o un alcance local) puede acceder a esta variable local a. habrá cierres en este momento.
Entonces, la función en la que se ubica esta variable a se llama función de cierre.
La función principal del cierre: amplía el alcance de la variable.
Pero los cierres también pueden provocar pérdidas de memoria.
1. El primer tipo
<script>
// 闭包：fun 这个函数作用域访问了另外一个函数fn 里面的局部变量 num，此时就产生了闭包，而被访问的局部变量num所在的函数fn就是闭包函数
// fn 外面的作用域可以访问fn 内部的局部变量
function fn() {
var num = 10;
function fun() {
console.log(num);
}
fun();
}
fn();
</script>
2. El segundo tipo
(El alcance fuera de la función accede a las variables locales dentro de la función)
<script>
// fn 外面的作用域可以访问fn 内部的局部变量
function fn() {
var num = 10;
function fun() {
console.log(num);
}
// fun 不加括号就相当于一个变量，也就是相当于fun的整体
// 函数是一种数据类型，所以可以当参数，也可以当返回值
return fun;
}
// 此时就实现了fn函数外面的作用域可以访问fn内部的局部变量了
var f = fn();
f();
/*
1、fn() 这个函数一调用，就会执行 function fn(){} => var num = 10; => function fun(){}不调用不执行
==> 执行return fun;
类似于 var f = function fun() {
console.log(num);
}
==> 此时 f 存的是一个函数 => 此时就可以调用f 这个函数 f(); =>调用了f();它就会到function fun(){}
==>function fun(){} 里面的num 因为在函数fn 里面，所以可以使用fn函数的变量，
==> 所以调用f 就可以打印出num
*/
</script>
3. Preguntas habituales en las entrevistas para los cierres
<body>
<ul class="nav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
// 利用闭包的方式得到当前li的索引号
var lis = document.querySelector('.nav').querySelectorAll('li');
for(var i = 0; i<lis.length; i++){
// 利用for循环创建了四个立即执行函数
(function(i){
lis[i].onclick = function(){
console.log(i);
}
})(i);
}
</script>
</body>