1. Definition
A closure is a function that can read internal variables of other functions. Since in the Javascript language, only sub-functions inside a function can read local variables, a closure can be simply understood as "a function defined inside a function". So, in essence, a closure is a bridge that connects the inside of the function with the outside of the function.
Use of closures:
Function internal members can be read outside the function
Let the members of the function always live in memory
2. Principle
In fact, in the scope mechanism of js , there is a scope that is eternal, that is, the window global scope. As long as the browser window is not closed, the global scope will not be destroyed. This windows global scope is eternal. Define a function in the global scope, no matter how many times it is called, these calls can share and operate the same global variable.
However, the local scope is not. It is only valid when the function is called. After the function call is completed, the local scope is closed, which means that the local variable is invalid. So we can't get local variables in the global scope, and we can't get local variables in other scopes.
But the closure is different. It can make its parent function scope eternal, like the windows global scope, which always exists in memory. This is also the nature of closures. It is also the second function of the closure we talked about in class to lock local variables.
When the closure function is called, it will dynamically open up its own scope. Above it is the eternal scope of the parent function, and above the scope of the parent function is the eternal global scope of window. After the closure function is called, its own scope is closed and disappears from memory, but the eternal scope of the parent function and the eternal scope of window are still open in memory. When the closure function is called again, it can still access these two scopes, and may also save the data generated when it was called last time. Only when the reference of the closure function is released, its parent scope will finally be closed (of course, the parent function may create multiple closure functions, and the scope of the parent function will be closed after all the closure functions are released. closure)
The following cases are listed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>闭包</title>
</head>
<body>
</body>
<script>
var num = 100
function demo1(){
var str = 'web前端'
console.log(str);
console.log(num);
}
demo1()
// console.log(str);
function demo2(){
console.log(num);
console.log(str);
}
demo2()
/*
一、闭包：定义在一个函数内部的函数
二、闭包的本质：让父函数作用域当做永恒作用域
三、闭包的作用：
1、可以读取父函数内部的变量
2、可以锁住父函数内部的变量
*/
</script>
<script>
function outer(){
var parent = 20;
function inner(){
// var child = 30
// console.log(child);
console.log(parent);
}
inner()
}
outer()
</script>
<script>
/*
闭包题的考点：闭包、作用域链的查找规则、预解析、this指向
*/
var name = 'this window';
var that =this;
var object = {
name:'this object',
getName:function(){
// var name = "this getName"
console.log(this.name);
console.log(name);
var name = "this getName"
/* function name(){
console.log(name);
}
name() */
var name1 =function(){
console.log(name);
console.log(this.name);
}.bind(this)
name1()
// console.log(name);
return function(){
console.log(name);
console.log(this.name);
}.bind(that)
console.log(name);// 不打印
}
}
object.getName()()
</script>
</html>Global scope -->Global variables-->It is valid in any scope:: Created when the browser is opened and destroyed when the browser is closed
Local scope (function) --> local variables --> valid in the current scope : : created when the function is called, and destroyed when the call is completed