A simple explanation of closures in JS-JS Tutorial-php.cn

A simple explanation of closures in JS

小云云

Release： 2018-01-04 09:30:37

Original

1397 people have browsed it

Everyone has heard of closures in JS. This article introduces closures in JS through sample code. It is very good and has reference value. Friends who are interested should take a look at it. I hope it can be helpful. Everyone.

1. "Closure is to access variables across scopes."

[Example 1]

var name = 'wangxi'
function user () {
 // var name = 'wangxi'
 function getName () {
 console.log(name)
 }
 getName()
}
user() // wangxi

Copy after login

To obtain the name in the getName function, first in the scope of the getName function Search for name in the scope of the user function, but it is not found. Then we search in the scope of the user function, but it is also not found. We continue to trace upward and find that name exists in the global scope, so we get the name value and print it. It is easy to understand here, that is, the variables exist in the specified scope. If the desired variable cannot be found in the current scope, the search will continue in the parent scope through the scope chain until the first one with the same name is found. variable (or if it cannot be found, a ReferenceError will be thrown). This is the concept of scope chain in js, that is, the child scope can access the variables in the parent scope according to the scope chain. What if, on the contrary, the parent scope wants to access the variables in the child scope? ——This needs to be achieved through closure.

[Example 2]

function user () {
 var name = 'wangxi'
 return function getName () {
 return name
 }
}
var userName = user()()
console.log(userName) // wangxi

Copy after login

Analyzing the code, we know that name is a local variable that exists within the scope of the user function. Under normal circumstances, it cannot be accessed in the external scope (here is the global). The name variable is accessed, but through closure (returning a function containing the variable, here is the getName function), the variable can be accessed across scopes (external access to internal). Therefore, the above statement should be completely understood as:

Closure is to access variables across scopes - the inner scope can maintain a reference to the variables in the outer scope so that (more) the outer scope can Access variables in the inner scope. (If you still don’t understand, read the next analysis)

2. "Closure: Dad is executed in the grandfather's environment, and the grandson is returned in the father. Originally, the father has been executed, and the father's environment should be cleared. , but the grandson refers to the father's environment, so the father cannot release it. Simply put, a closure is an object that references the parent environment and is returned to a higher-level environment. Object. "

How do you understand this? First look at the code below:

[Example 3]

function user () {
 var name = 'wangxi'
 return name
}
var userName = user()
console.log(userName) // wangxi

Copy after login

Q: Is this a closure?

Answer: Of course not. First, you need to understand what a closure is. Although it seems that the local variable name in the user function is accessed in the global scope, the problem is that after user is executed, name is also destroyed, that is, the life cycle of the local variable in the function only exists in During the function's declaration cycle, the function is destroyed and the variables within the function are automatically destroyed.

But using closures is the opposite. After the function is executed, the life cycle ends, but the variables in the outer scope referenced by the closure still exist, and will always exist until the scope that executes the closure is Destroy, the local variables here will be destroyed (if the closure is referenced in the global environment, the scope referenced by the closure will only be destroyed when the global environment is destroyed, such as the program ends, the browser is closed, etc.). Therefore, in order to avoid memory loss caused by closures, it is recommended to manually destroy closures after use. Still the same as Example 2 above, slightly modified:

[Example 4]

function user () {
 var name = 'wangxi'
 return function getName () {
 return name
 }
}
var userName = user()() // userName 变量中始终保持着对 name 的引用
console.log(userName) // wangxi
userName = null // 销毁闭包，释放内存

Copy after login

[Why user()() has two brackets: executing user() returns the getName function, To get the name variable, you need to execute the returned getName function once, so user()()】

According to point 2, analyze the code: the userName variable (grandpa) is created in the global scope, Saves the reference to the final return result of the user function (that is, the value of the local variable name), executes user()() (father), and returns name (grandson). Under normal circumstances, after executing user()(), The user's environment (father) should be cleared, but because the returned result name (grandson) refers to the father's environment (because name originally exists in the user's scope), the user's environment cannot be released (which will cause memory loss).

So ["A closure is an object that references the parent environment and returns an object from the parent environment to a higher-level environment."] How to understand?

Let’s put it another way: if a function refers to an object in the parent environment and returns the object to the higher-level environment in this function, then this function is a closure.

Look at the above example:

The getName function refers to the object (variable name) in the user (parent) environment, and returns the name variable to the global environment (higher level) in the function environment), therefore, getName is a closure.

3. "Functions in JavaScript run in the scope in which they are defined, not the scope in which they are executed."

This sentence explains the use of variables in closures. Understanding citations is helpful. Let’s look at the following example:

var name = 'Schopenhauer'
function getName () {
 console.log(name)
}
function myName () {
 var name = 'wangxi'
 getName()
}
myName() // Schopenhauer

Copy after login

If the output result of executing myName() is different from what you imagined, you have to go back and look at the sentence above,

JavaScript Functions in run in the scope in which they are defined, not the scope in which they are executed.

执行 myName，函数内部执行了 getName，而 getName 是在全局环境下定义的，因此尽管在 myName 中定义了变量 name，对getName 的执行并无影响，getName 中打印的依然是全局作用域下的 name。

我们稍微改一下代码:

var name = 'Schopenhauer'
function getName () {
　 var name = 'Aristotle'
 var intro = function() { // 这是一个闭包
  console.log('I am ' + name)
 }
 return intro
}
function showMyName () {
 var name = 'wangxi'
 var myName = getName()
 myName()
}
showMyName() // I am Aristotle

Copy after login

结果和你想象的一样吗？结果留作聪明的你自己分析~

以上就是对 js 中闭包的理解，如果有误，欢迎指正。最后引用一段知乎问题下关于闭包概念的一个回答。

什么是闭包?

简单来说，闭包是指可以访问另一个函数作用域变量的函数，一般是定义在外层函数中的内层函数。

为什么需要闭包？

局部变量无法共享和长久的保存，而全局变量可能造成变量污染，所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。

特点