JS script features that are easily overlooked_javascript skills

1. Local variables that are easily ignored

Copy the code The code is as follows:

var a = 5;
(function(){
alert(a);
var a = a ;
alert(a);
})()
alert (a);

Think about the execution results of this code.
After execution, see if it is consistent with your imagination?
ok, the core knowledge point in this code is var a = a, where the two variables a are local variables inside the anonymous function, they are the same, and they are different from the global variable a.
Why? Let’s take a look at the definition of variable declaration statements in the ECMA specification:

Copy code The code is as follows:

Description
If the variable statement occurs inside a FunctionDeclaration, the
variables are defined with function-local scope in that function, as
described in s10.1.3. Otherwise, they are defined with global scope
(that is, they are created as members of the global object, as described
in 10.1.3) using property attributes { DontDelete }. Variables are
created when the execution scope is entered. A Block does not define a new
execution scope. Only Program and FunctionDeclaration produce a new
scope. Variables are initialised to undefined when created. A variable with
an Initialiser is assigned the value of its AssignmentExpression when the
VariableStatement is executed, not when the variable is created.

The
declaration mentions: After entering the scope environment, the variable will be created and given an initial value of undefined. The value of the assignment expression is assigned to the variable when the variable declaration statement is executed, not when the variable is created.
So the above code can be equivalent to:

Copy the code The code is as follows:

var a;
a = 5;
(function(){
var a;
alert(a);
a = a ;
alert(a);
})()
alert(a);

This should be easier to understand.
2. Global variables that are easily overlooked

Copy the code The code is as follows:

(function(){
var a = b = 5;
})()
alert(b);

This is Uncle Yu’s days The knowledge points shared before are quite meaningful, and I will also analyze them here.
First, consider why the execution result is: 5.
ok, the reason lies in the sentence var a = b = 5.
In order to analyze this statement in depth, we continue to refer to the definition of a declaration statement in the ECMA specification:
var a = b = 5; is equivalent to var a; a = b = 5; two statements, the latter is an assignment Expression, its definition in ECMA is as follows:

Copy code The code is as follows:

Simple Assignment ( = )
The production AssignmentExpression : LeftHandSideExpression =
AssignmentExpression is evaluated as follows:
1. Evaluate LeftHandSideExpression.
2. Evaluate AssignmentExpression.
3. Call GetValue(Result( 2)).
4. Call PutValue(Result(1), Result(3)).
5. Return Result(3).

For a = b = 5; First execute the expression a on the left, which is an identifier expression. According to section 10.1.4 of the specification, its execution method is as follows:

Copy code The code is as follows:

During execution, the syntactic production PrimaryExpression : Identifier
is evaluated using the following algorithm:
1. Get the next object in the scope chain. If there isn't one, go to step 5.
2. Call the [[HasProperty]] method of Result(1), passing the Identifier as
the property.
3. If Result(2) is true, return a value of type Reference whose base
object is Result(1) and whose property name is the Identifier.
4. Go to step 1.
5. Return a value of type Reference whose base object is null and whose
property name is the Identifier.

Search the scope chain to find the nearest reference to a. Obviously, it can be found in the scope inside the anonymous function, so the variable a is determined.
Then execute the expression b = 5 on the right, which is still an assignment expression. Repeat the first step of the assignment rule. Because the variable b has not been declared in the anonymous function environment, then go to the window global environment to find window.b , is implicitly declared as a global variable, and is finally assigned a value of 5. According to the fifth step of the rule, the result of the expression will also be assigned to a. Finally, both a and b are 5. The difference is that a is a local variable and b is a global variable.
Let’s take a look at the overall execution sequence of the (function(){var a = b = 5})() expression:
1. Create variable a in the anonymous function;
2. Assign an initial value undefined;
3. Get a reference to variable a; //a
4. Get a reference to variable b; //window.b
5. Evaluate the number 5;
6. Assign 5 Reference to b: window.b;
7. Return the result 5 of b = 5. Reference to a: a;
8. Return the result 5 of a = 5;
Obviously, the middle one The steps make the variable b be declared as a global variable. After understanding it, it is not difficult for us to find the optimization point of the code: we only need to explicitly declare the variable b as a local variable:

Copy Code The code is as follows:

(function(){
var a,b;
a = b = 5;
})( )