1, var variable pre-compilation

The syntax of javascript is similar to c, java, c#, collectively called c-type syntax. Students with C or Java programming experience should be familiar with the "declaration first, then use" rule.If you use undeclared variables or functions,Errors are reported during the compilation phase.However, JavaScript can use variables and functions before they are declared.Let's take a closer look at the mystery.

First look at a piece of code:

(function () {
 console.log (nosuchvariable);//referenceerror:nosuchvariable is not defined
}) ();

Running the above code immediately gives an error,However, this is exactly what we expected,Because nosuchvariable is not defined at all! Take a look at the following code again:

(function () {
 console.log (declaredlater);//undefined
 var declaredlater="now it" s defined! ";
 console.log (declaredlater);//"now it" s defined! "
}) ();

First of all, the above code is correct,There is no problem.But why not report an error?Is the declaredlater variable defined after the call statement?Why does it output undefined?

This is actually a ghost of the javascript parser,The parser puts all variables and functions declared in the current scope at the beginning of the scope,However, only variable declarations are advanced to the beginning of the scope,The assignment operation is left in place.The above code is actually as follows for the parser:

(function () {
 var declaredlater;//The declaration is advanced to the beginning of the scope!
 console.log (declaredlater);//undefined
 declaredlater="now it" s defined! ";//Assignment is still in place!
 console.log (declaredlater);//"now it" s defined! "
}) ();

This is why the above code does not report an exception! After the variables and functions are "advanced", the declaredlater variable is actually placed before the calling function.According to the definition of javascript syntax,Variables that are declared but not assigned are automatically assigned the value of undefined, so the first time the value of the declaredlater variable is undefined, we later perform the assignment operation on the declaredlater variable.So, printing the variable a second time will output now it "s defined !.

Let's look at another example:

var name="baggins";
(function () {
 console.log ("original name was" + name);//"original name was undefined"
 var name="underhill";
 console.log ("new name is" + name);//"new name is underhill"
}) ();

In the above code,We first declared a variable name. Our original intention was to output a globally defined name variable when printing the name variable for the first time, and then define a local name variable in the function to override the global variable.Finally, the value of the local variable is output.But the first output was completely inconsistent with our expectations.The reason is that the local variable we defined is "advanced" in its scope, that is, it has become the following form:

var name="baggins";
(function () {
 var name;//Note:the name variable is advanced!
 console.log ("original name was" + name);//"original name was undefined"
 console.log ("new name is" + name);//"new name is underhill"
}) ();

Since JavaScript has such "quirks", it is recommended that you place variable declarations at the top of the scope.This will remind you at all times.

Function declarations are "advanced"

What was said before is the variable,Next we talk about functions.

There are two cases of the "being advanced" function,One is function declaration,The second is to assign a function to a variable as a value,That is, a function expression.

Let's start with the first case,On the code:

isithoisted ();//"yes!"
function isithoisted () {
 console.log ("yes!");

As shown above,The javascript interpreter allows you to use it before function declarations,That is,Function declarations are not just that the function name is "advanced", the entire function definition is also "advanced"! So the above code can execute correctly.

Let's look at the second case:function expression form.Still on the code first:

definitionhoisted ();//"definition hoisted!"
definitionnothoisted ();//typeerror:undefined is not a function
function definitionhoisted () {
 console.log ("definition hoisted!");
var definitionnothoisted=function () {
 console.log ("definition not hoisted!");

We made a comparison,The definitionhoisted function is properly executed,Conform to the first type;The definitionnothoisted variable is "advanced", but its assignment (that is, the function) is not advanced.From this point,It is exactly the same as the variable "being advanced".And, because the default value of a variable that is "advanced" is undefined, the error reported is a "type mismatch" because undefined is not a function.Of course it cannot be called.

to sum upThe above explanation can be summarized as follows:

Variable declarations are advanced to the top of the scope,Assignment remains in place

Function declarations are "before"

Function expression,Only the variable is "advanced", the function is not "advanced"

3.Var side effects

There are small differences between implicit global variables and well-defined global variables,It is the ability to make variables undefined through the delete operator.

Global variables created by var (created in any program other than a function) cannot be deleted.

Implicit global variables created without var (regardless of whether they are created in a function) can be deleted.

This shows that, technically,Implicit global variables are not truly global variables,But they are properties of global objects.Attributes can be deleted with the delete operator,And variables cannot:

//define three global variables
var global_var=1;
global_novar=2;//negative textbook
(function () {
 global_fromfunc=3;//negative textbook
} ());
//try to delete
delete global_var;//false
delete global_novar;//true
delete global_fromfunc;//true
//test the deletion
typeof global_var;//"number"
typeof global_novar;//"undefined"
typeof global_fromfunc;//"undefined"

In es5 strict mode,Undeclared variables (such as the two negative textbooks in the previous snippet) throw an error when working.

4.Declaring variables in single var form

Using a single var statement at the top of a function is a more useful form.The benefits are:

Provides a single place to find all local variables needed for a function

Prevents logical errors used by variables before they are defined

Less code (type, value, single line completion)

The single var form looks like this:

function func () {
 var a=1,  b=2,  sum=a + b,  myobject=(),  i,  j;
 //function body ...

You can declare multiple variables with one var statement,And separated by commas.It's good to initialize variables and initialize values ​​like this.This prevents logical errors (the initial value of all uninitialized but declared variables is undefined) and increases the readability of the code.After you see the code,You can know the general purpose of these variables based on the initialized values.

  • Previous Improve ajax list request experience based on h5 history
  • Next Method for implementing verification code by jsp + Servlet programming