Home >Web Front-end >JS Tutorial >Detailed explanation of the use of javascript scope and closure_Basic knowledge
The nesting of scopes will form a scope chain, and the nesting of functions will form a closure. Closures and scope chains are one of the important features that distinguish JavaScript from other languages.
Scope
There are two types of scope in JavaScript: function scope and global scope.
Variables declared in a function and the parameters of the function share the same scope, that is, the function scope. A simple example of function scope:
Unlike other block-scoped languages such as C, this will always return 2 .
Global scope, for browsers, can be understood as the window object (Node.js is global):
Both the variable bar and the function foo belong to the global scope and are both attributes of window.
Scope chain
When accessing a variable in JavaScript, it will start from local variables and parameters and traverse the scope step by step until it reaches the global scope.
To give a simple example, when you are going to spend money to buy something, you will first touch your wallet. If you don’t have it, you can ask your dad for it. If your dad doesn’t have it, you can ask your grandpa... And when your dad doesn’t have money to buy something, he won’t come to you to ask for it.
Closure
In one function, defining another function is called function nesting. The nesting of functions will form a closure.
Closures and scope chains complement each other. The nesting of functions not only creates multiple scopes in a chain relationship, but also forms a closure.
External functions cannot access embedded functions
External functions cannot access parameters and variables of embedded functionsBut embedded functions can access parameters and variables of external functions
In other words: embedded functions Contains the scope of the external function
Let’s look at the scope chain example mentioned before, this time understanding it from the perspective of closure:
The innermost function can access all variables defined internally and externally. The penultimate layer function cannot access the innermost variable. At the same time, the assignment operation of scope = 3 in the innermost layer does not affect the external variable of the same name.
Let’s understand closure from another angle:
Each time an external function is called, the embedded function will be created once
When it is created, the scope of the external function (including any local variables, parameters, etc. context) will become each embedded function object part of the internal state, even after the external function completes execution and exits
See the following example:
We will get "2" twice instead of the expected "1" and "2". This is because the variable i accessed by the two functions in the list is the same variable in the upper scope. .
Let’s change the code to use closures to solve this problem:
The outer "immediate execution function" receives a parameter variable i, which exists in the form of parameter j within its function. It points to the same reference as the name j in the returned inner function. After the outer function executes and exits, parameter j (its value is the current value of i at this time) becomes part of the state of its inner function and is saved.