Before es6, front-end js did not have strict block-level scoping for naming variables. In es6, such a primary basic feature was added, so we have to talk about the primary basic feature.
(1) Scope
The above paragraph is taken from Baidu Encyclopedia. It can be seen from this text that some variables or functions do not need to exist forever during their use. When we need to use it, instantiate it to define it. After it is finished, it is discarded, the process of creation is called construction, and the process of discarding is called destruction. The scope that exists during this process of construction and destruction is its scope.
For example: When we need to do loop traversal processing, we usually define an i variable, which is surrounded by a for statement:
for(int i = 0 ;i <x ;i ++){}
The scope of i here is the code area where it is located. When the program finishes running this section, i is destroyed.
Before es6, a special variable was defined after a method. Before defining this variable, if the function has been executed and the variable is used, but the function will not report an error, it is because there is no variable scope. The definition position does not affect the use. When the program is compiled before execution, its definition position will be advanced, and the definition declaration will be placed at the front of the file context. This behavior is called scope promotion.
If there is no block-level scope, i becomes x after the execution of for, and it can still be called and used until the end of the current function. The scope of javascript is relative to the function.
(2): Scope chain
According to the mechanism by which the inner function can access the outer function variables, a chain lookup is used to determine which data can be accessed by the inner function. When each function runs, an execution environment is generated, and how is this execution environment represented? js associates a variable object with each execution environment. All variables and functions defined in the environment are stored in this object. The global execution environment is the outermost execution environment, and the global execution environment is considered to be the window object, so all global variables and functions are created as properties and methods of the window object.
The execution order of js is determined according to the call of the function. When a function is called, the variable object of the function environment is pushed into an environment stack. After the function is executed, the stack pops the variable object of the function and transfers control to the previous execution environment variable object.
When the function is running, a variable is called. If it is not found in the current block, it will go to the upper-level directory to find the variable. If it is found in the upper-level directory, it will be used. If it is still not found, it will report underfinded.
(3): Closure
var scope = '0';
function a(){
var scope = '1';
function b(){
console.log(this.scope);
}
return b ;
}
ab(); //The output result is 1, b is triggered when ab() is called, and b() called by a, then this points to a, b is not found in b when the scope is printed, then look up in a and find it then print,
var fn = a();
fn();//The output result is '0', fn() is defined in the global environment and points to window, and when fn() is called, the event triggers a, at this time this points to window, then scope = '0 '.
However, if you add a function to b, such as
function b(){
return function (){
console.log(this.scope);
} }, at this time this points to the window. After the a() function is executed, it is destroyed, but the b() in a will not be destroyed, but exists in the memory, which is the closure.
The this object is bound at runtime based on the execution context of the function: in a global function, this is equal to window, and when the function is called as an object, this is equal to that object. However, anonymous functions are global, so this object always points to window
Summary: The pointing of this has nothing to do with the location of its definition, but is related to the location of the call. The this of the anonymous function points to the window.
(4) es6, variables and constants
In ES6, let is used instead of var to define variables, and variables defined by let will have block-level scope. When the function finishes running the block, the variables defined by let will be invalid.
ES6 uses const to define constants, which cannot be changed after constants are defined, eg. const a = 10; then a is always 10 in its scope and cannot be reassigned.
But if you define const a = {name: 'Chapter 3', sex: 'male'}, you can perform a.name = 'Li Si', such a reassignment operation, the reason is that when an object is declared and defined, its variable The name is just an address pointing to the real internal storage of the object. As long as the address of a remains unchanged, how the actual content of a changes a will not change, and naturally it will not be illegal.