In this article, I will introduce you to the JS management scope. If you need it, you can follow the keywords: identifier, execution context, scope, scope chain, variable object, activity object theoretical knowledge
It is important to understand how JavaScript manages scopes and scopes. Because the number of variable objects to be searched in the scope chain directly affects the performance of identifier parsing. The deeper the identifier is in the scope chain, the longer it takes to search for and access it. If the scope management is improper, it will negatively affect the script execution time.
When JavaScript code is executed, the JavaScript engine createsExecution Context(Execution Context ). Execution context (sometimes calledScope) Sets the environment for code execution. The JavaScript engine creates a global execution context after loading the page. Each time a function is executed, a corresponding execution context is created, and a stack of execution context is created, the currently active execution context is at the top of the stack.
Each execution context is associatedScope chainFor ParsingIdentifier. The scope chain contains one or moreVariable objectThese objects define identifiers within the execution context scope. There is only one variable object in the scope chain of the global execution context, which defines all available global variables and functions in JavaScript. When a function is created (not executed), the JavaScript engine assigns the scope chain of the execution context to the function.Internal attribute [[Scope]. Then, when the function is executed, the JavaScript engine createsActivity object(Activetion Object), and assign values to this, arguments, named parameters, and all local variables of the function during initialization. The active object appears at the top of the execution context scope chain, followed by the object in the function [[scope] attribute.
During code execution, the JavaScript engine searches for the execution context's scope chain to parse identifiers such as variables and function names. The process of parsing an identifier starts from the top of the scope in the top-down order.
Verification Theory
Function add (num1, num2 ){
Return num1 + num2;
}
When this code execution starts, the add function has a [[scope] attribute that only contains the global variable object. For example:
When the add function is executed, the JavaScript engine creates a new execution context and an activity object containing this, arguments, num1, and num2, and adds the activity object to the scope chain. When running the add () function, the JavaScript engine needs to parse the num1 and num2 identifiers in the function. Var total = add (5, 10 );
The parsing process starts with the first object in the scope chain. This object is the activity object that contains the local variables of the function. If no identifier is found in this object, the identifier will continue to be searched for in the next object in the scope chain. Once an identifier is found, the search ends.
Efficient Data Access
A local variable is the fastest read/write identifier in JavaScript.
Good experience: When any non-local variable is used more than once in a function, it should be stored as a local variable.
For arrays and objects, the values that require frequent access are always stored in local variables.
In fact, every time you access the properties of the HTMLCollection object, the DOM document is dynamically queried.
If you need to repeatedly access members of HTMLCollection objects, the efficient way is to copy them to the array.