Javascript variables and scopes

Today, I learned the basic knowledge of javascript variables and scopes. I also have a systematic understanding of some minor issues that I encountered during development, and I have gained a lot. [Basic type and reference type] The ECMAScript variable may contain two different data types: basic type value and reference type value. A basic type value refers to a simple data segment, and a reference type value refers to objects that may consist of multiple values. Five common basic data types are Undefined, Null, Boolean, Number, and String. These basic data types are accessed by value, therefore, you can operate on the actual values stored in the variable. The value of the reference type is an object stored in the memory, that is, the object's memory space cannot be operated directly. The value of the reference type is accessed by reference. Note: We cannot add attributes to values of the basic type. For example, the following code: var name = 'name1'; name. age = 22; console. log (name. age); // undefined [Copy variable value] When copying a basic type value from a variable to another variable that references a type value, if you copy a value of the basic type from one variable to another, a new value is created on the variable object, and then the value is copied to the location assigned to the new variable. For example: var num1 = 5; var num2 = num1; using the above replication method, 5 in num1 and 5 in num2 are completely independent, that is to say, modifying num1 or num2 does not affect another value. For more information, see the following code: var num1 = 5; var num2 = num1; console. log (num1, num2); // 5 5num1 = 6; console. log (num1, num2 );/ /6 5 a process of copying the basic type value displayed in the table image below: The variable object before copying the variable object after copying num2 5 (Number type) num1 5 (Number type) num1 5 (Number type) When copying a value of the reference type from one variable to another, it also copies the values stored in the variable object and places them in the space allocated for the new variable. But the copy of this value is actually a pointer, and this pointer points to an object stored in the heap. After the copy operation, the two variables reference a value. Therefore, changing any variable will affect another variable. For example, run the following code: copy the code var per1 = new Object (); var per2 = per1; per1.name = 'name1'; console. log (per1.name, per2.name); // name1 name1 per1.name = 'name2'; console. log (per1.name, per2.name); // name2 name2 per2.name = 'name3'; console. log (per1.name, per2.name); // The name3 name3 copy code shows in detail the relationships between the objects saved in the variable object and those saved in the heap: [PASS Parameters] All function parameters in ECMAScript are passed by value. That is to say, the external value of the function is copied to the internal parameter of the function, just like copying a value from a variable to another variable. The transfer of the basic type value is the same as that of the basic type variable. The transfer of the reference type is the same as that of the reference type variable. For example, run the following code: copy the code function addNum (num) {num + = 10; return num;} var count = 20; var result = addNum (count); console. log (count, result); // 20 30 copy the code. Here, the addNum () function has a parameter num, which is actually a local variable of the function. When this function is called, the variable count is passed to the function as a parameter. The value of this variable is 20. Therefore, the value 20 is copied to the parameter num. However, changing num does not affect the count value, so the count output value is still 20. Another example: function setName (obj) {obj. name = 'name5';} var newObj = new Object (); setName (newObj); console. log (newObj. name); // the code in name5 seems to have modified the value of newObj name in a local scope, which is also reflected in the global scope. This understanding is wrong. Let's look at another piece of code: copy the code function setName (obj) {obj. name = 'name6'; var obj = new Object (); obj. name = 'name7';} var newObj = new Object (); setName (newObj); console. log (newObj. name); // compare the copied code of name6. If newObj is passed by reference, the name attribute of newObj should be name7, but the name attribute is name6, this indicates that the parameter value is modified in time within the function, but the original reference remains unchanged. [Execution environment and scope] The execution environment defines other data that variables or functions have the right to access and determines their respective actions. The global execution environment is the most peripheral execution environment. In a Web browser, the global execution environment is considered a window object, therefore, all global variables and functions are created as properties and methods of the window object. Each function has its own execution environment. When the code is executed in an environment, a scope chain of the variable object is created. The purpose of the scope chain is to ensure orderly access to all variables and functions that are accessible to the execution environment. The frontend and clock of the scope chain are all variable objects in the environment where the code currently executed is located. If the environment is a function, the activity object is used as the variable object. The next variable object in the scope chain comes from the include (external) environment, and the next variable object comes from the next include environment. The variable objects in the global execution environment are always the last objects in the scope chain. Identifier Parsing is a process of searching identifiers at the level of the scope chain. See the following code: copy the code var color = 'blue'; function changeColor () {if (color = 'blue') {color = 'red ';} else {color = 'Blue ';}} changeColor (); console. log (color); // The red copy code function changeColor () has two scopes: its own variable object (which defines the arguments object) and the global environment variable object. When changeColor is executed, the color is not found in its own scope, so it is found in the global environment, the color value is blue, and then according to changeColor () function rules set the color value to red. Let's look at a more detailed piece of code: copy the code // here you can only access colorvar color = 'blue'; function changeColor () {// here you can access color, newColor, however, you cannot access temColor var newColor = 'red'; function swapColor () {// here you can access color, newColor, and temColor var temColor = newColor; newColor = color; color = temColor ;} swapColor (); console. log (color, newColor); // red blue} function showColor () {console. log (color); // blue} showColor (); changeColor (); copy the content of the Code. I will not explain it in detail here. [No block-level scope] See the following code: for (var I = 0; I <10; I ++) {I + = 1;} console. log (I); // 10 for languages with block-level scopes, the variables defined by the for statement initialization variable expression only exist in the cyclic environment. In javascript, I will be destroyed after the for loop is executed. Instead, I will be added to the current execution environment (Global Environment. 1. variables declared using var are automatically added to the nearest environment. Within a function, the closest environment is the local environment of the function. See the following code: copy the code function addNum (num1, num2) {var num = num1 + num2; return num;} var result = addNum (); console. log (result); // 30console. log (num); // num is not defined copy the code above. If you do not use var to declare num, it will not cause errors. For example, copy the code function addNum (num1, num2) {num = num1 + num2; return num;} var result = addNum (10, 20); console. log (result); // 30console. log (num); // 30 copy the Code 2. query identifier when an identifier is referenced for reading or writing in an environment, you must search to determine what the identifier actually represents. The search process starts from the front end of the scope chain and goes up to query the identifiers that match the given name. If this identifier is found in a local environment, the search process is stopped and the variable is ready. If the variable name is not found in the local variable, the search continues along the scope chain. The search process will be traced back to the global environment variables. If the identifier is not found in the global environment variable, the variable is not defined yet. See the following code: var color = 'blue'; function getColor () {return color;} console. log (getColor (); // bluegetaColor () does not find the color when searching for local variables, and the function execution statement must return a color, and is searched in the global environment variable, and the color is found. Note that if a definition of a local variable exists in the search process, the search will stop automatically and no longer enter another variable object. That is to say, if an identifier with the same name exists in a local environment, the identifier in the parent environment will not be used. For example, the following code: var color = 'Blue '; function getColor () {var color = 'red'; return color;} console. log (getColor (); // The red scope chain is important for understanding the concept of closures, and you should not be able to understand them more deeply.