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
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
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
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 // 销毁闭包,释放内存
[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
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
结果和你想象的一样吗?结果留作聪明的你自己分析~
以上就是对 js 中闭包的理解,如果有误,欢迎指正。最后引用一段知乎问题下关于闭包概念的一个回答。
什么是闭包?
简单来说,闭包是指可以访问另一个函数作用域变量的函数,一般是定义在外层函数中的内层函数。
为什么需要闭包?
局部变量无法共享和长久的保存,而全局变量可能造成变量污染,所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。
特点
占用更多内存
不容易被释放
何时使用?
变量既想反复使用,又想避免全局污染
如何使用?
定义外层函数,封装被保护的局部变量。
定义内层函数,执行对外部函数变量的操作。
外层函数返回内层函数的对象,并且外层函数被调用,结果保存在一个全局的变量中。
相关推荐:
The above is the detailed content of A simple explanation of closures in JS. For more information, please follow other related articles on the PHP Chinese website!

JavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.

Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.

C and C play a vital role in the JavaScript engine, mainly used to implement interpreters and JIT compilers. 1) C is used to parse JavaScript source code and generate an abstract syntax tree. 2) C is responsible for generating and executing bytecode. 3) C implements the JIT compiler, optimizes and compiles hot-spot code at runtime, and significantly improves the execution efficiency of JavaScript.

JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.

Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

WebStorm Mac version
Useful JavaScript development tools

Atom editor mac version download
The most popular open source editor

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software