Home > Article > Web Front-end > JavaScript variable scope and memory issues (2)_html/css_WEB-ITnose
The execution environment is a particularly important concept in js. It means that variables or functions can access other data and define their own behavior. Each execution environment has a corresponding variable object. All variables and functions defined in the execution environment are stored in this variable. We cannot see this variable, but it can be seen in the background.
The execution environment of global variables is the most peripheral execution environment. In a web browser, the global execution environment is the window object, so all functions and global variables can be used as an attribute of the window object. Other execution environments destroy memory after functions and variables are executed, variables and functions are also destroyed, and global variables are also destroyed when the page or browser is closed.
“When code is executed in an environment, a scope chain of variable objects is created. The purpose of the scope chain is to ensure orderly access to all variables and functions that the execution environment has access to. . The front end of the scope chain is always the variable object of the environment where the currently executed code is located. If the environment is a function, its activation object contains only one variable at the beginning. That is, the arguments object (this object does not exist in the global environment). The next variable object in the scope chain comes from the containing (external) environment, and the next variable object comes from the next containing environment, and so on. Global execution environment; the variable object of the global execution environment is always the last object in the scope chain. "
We can get a lot of particularly important information. The role of the scope chain is to ensure that all variables and variables in the execution environment are protected. Functions are accessed in an orderly manner. This ordering is reflected in the fact that the front end of the scope chain is the argument object, and the last end is the window object of the global execution environment. Look at the following example:
var color = "blue";function changeColor(){ var anotherColor = "red"; function swapColors(){ var tempColor = anotherColor; anotherColor = color; color = tempColor; // 这里可以访问color、anotherColor和tempColor } // 这里可以访问color和anotherColor,但不能访问tempColor swapColors();}// 这里只能访问colorchangeColor();
2. Extend the scope chain
Some statements can be executed When adding a variable object to the front end of the stack of the scope, it will be cleared after the statement is executed, thereby extending the scope. The following two statements will extend the scope:
1. The catch statement of the try-catch statement
2.with statement
such as:
function buildUrl() { var qs = "?debug=true"; with(location){ var url = href + qs; } return url;}
Here, the with statement receives the location object, so its variables The object contains all properties and methods of the location object, and this variable object is added to the front end of the scope chain. A variable qs is defined in the buildUrl() function. When the variable href is referenced in the with statement (the actual reference is location.href), it can be found in the variable object of the current execution environment. When referencing the variable qs, it refers to the variable defined in buildUrl(), which is located in the variable object of the function environment. As for the inside of the with statement, a variable named url is defined, so url becomes part of the function execution environment, so it can be returned as the value of the function.
3. No block-level scope
1. In other languages, curly braces enclose the scope of variables, such as loop statements, etc., but js does not have block-level scope.
2. When declaring a variable in js, if var is not added, the default is a global variable.
3.js queries identifiers in the order of first querying in the local scope and then in the global scope.
For example:
var color = "blue";function getColor(){ var color = "red"; return color;}//"red"alert(getColor());