What is a closure
Closure: A closure is a form of code in which the internal variables access the same variables of the external function.
In JS, whenever a function is created, the closure will be created at the same time as the function is created, as a bridge connecting the inside of the function with the outside
Example: There is a function B in the js function A, and the local variable defined in the number A accessed by the rain number B, a closure is generated at this time.
The function where the variable is located is the closure function, where A is the closure rain number.
<script>
// 外部函数
function outer(){
// 外部函数中的局部变量
let n =10
// 内部函工
function inner(){
//内部函数访问外部函数的局部变量
console.log(n);
}
//将内部函数return出去，这样外部才可以调用
return inner
}
let fn =outer();
console.log(fn);
fu()
</script>Closure
Function 1: Solve the problem of variable pollution and let variables be protected by functions.
In the above code, add+count constitutes a closure
Summary: If an external variable is used in a function, the function and the external variable used are called a closure structure
In actual development, a function is usually used to wrap the closure structure to protect variables
<script>
// 示例代码 let count = 0
setInterval(function (){
console.log(count++);
},1000)
// 以上代码中的count是一个使用频率很高的变量名。
// 为了避免和其他位置的代码冲突,可以再使用一个函数把以上的代码包裹起来,起到保护作用
function fn(){
let count = 0
setInterval(function(){
console.log(count++)
;},1000)
}
fn()
// 以上代码中,setInterval函数与count构成了闭包
function fn(){
let count = 0
function add(){
console.log(count++);
}
setInterval(add,1000)
}
fn()
</script>2
Function 2: You can extend the life cycle of variables
Variable declaration cycle:
Global variables: from declaration until page close
Local variables: from the beginning of declaration until the end of function execution
【Global variables】
The global variable n is written outside the function
[local variables]
Local variables: feature 1 - can only be accessed inside the function
Feature 2- Function will be destroyed after execution
<script>
let n = 10;
function ck(){
console.log(n);
}
// 函数内部可以访问到全局变量
ck() //10
// 【局部变量】
function outer(){
// 局部变量:特点1-只能在函数内部访问
// 特点2-函数执行结束后就会被销毁
let b = 20;
// 内部访问局部变量v
console.log(b); //20
};
outer();
//函数作用域外,不能访问局部变量 x
// console.log(b);
//【将上述情况变成闭包函数,定义一个内部函数,让其访问到外部函数的局部变量】
function outer (){
let b = 20;
return function inner(){
console.log(b);
}
}
let fun = outer()
fun()
//取消注释,打印45行结果 访问到42行打印的b
</script>
3
Role 3: Provides limited access
<script>
function data(){
let age = 18
// 读取数值
function getAge(){
return age
}
// 设置数据
function setAge(n){
// 在赋值时，所赋的值进行合理的校验
if(n>0 && n<100){
age = n
}
}
// 返回一个对象到外部 对象带着两个内部函数
return {
getAge:getAge, setAge:setAge
}
}
let op = data(); op.setAge(80)
console.log(op.getAge());
</script>