The formation of closures: The references of the function and the surrounding state (lexical environment) are bundled together to form a closure. A
closure can call the internal function of a function in a scope and access the members in the scope of the function
The simple understanding is to extend the scope of the internal members of the external function . Here we need to add a little knowledge: when the
function is executed, it will be placed on an execution stack, and when the function is executed, it will be removed from the execution stack
but closed. When it happens, the scope members on the heap cannot be released because they are externally referenced, so the function can still access the members of the external function
Look at the following button, this is a simple application of closures
// 函数作为返回值
function makeFn(){
let msg = "hello Closure!"
return function(){
console.log(msg)
}
}
The principle is that the external function makeFn the internal members msg is scope to extend the
Next, let’s observe the process of closure through Chrome’s devtool.
Let’s put a breakpoint on line 49, pay attention to the execution stack and scope on the right, and then start debugging step by step.
At the beginning of execution, push the makeFn function to the execution stack, see that the scope this points to window, the variable declaration of msg is promoted, and the value undefined is assigned
to continue execution: Assign
a value to msg and find a return value, which is a function that
continues to execute two steps. Entering into the returned function, Closure is a closure. At the same time, msg is stored in the closure
to continue execution, and the content of msg will be output. It is found that when Closure appears, that is, when the closure occurs, msg is not released. , So it’s still accessible.
Give a few examples of closures
// once
function once(fn){
let done = false
return function(){
if(!done){
done = true
return fn.apply(this ,arguments)
}
}
}
let print = once(function (msg) {
console.log(msg)
})
// print("666")
// print("666")
// print("666")
// print("666")
// 延长了外部函数的内部成员的作用范围
// 计算底数的几次幂
function makePow (exponent){
return function(buttomNuber){
return Math.pow(buttomNuber,exponent)
}
}
// console.log(makePow(2)(2))
// 闭包累加器
function add(){
let sum = 0
return function(){
console.log( ++ sum)
}
}
// var myadd = add()
// myadd()
// myadd()
// myadd()
// myadd()
Reference material:
Retract Education