JavaScript explores var pre-parsing and side effects

Side effects of var

There is a small difference between implicit global variables and explicitly defined global variables, which is the ability to leave variables undefined through the delete operator.

Global variables created through var (created in any program outside of functions) 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 really global variables, but they are properties of the global object. Properties can be deleted via the delete operator, but variables cannot:

// 定义三个全局变量
var global_var = 1;
global_novar = 2;       // 反面教材
(function () {
   global_fromfunc = 3; // 反面教材
}());
 
// 试图删除
delete global_var;      // false
delete global_novar;    // true
delete global_fromfunc; // true
 
// 测试该删除
typeof global_var;      // "number"
typeof global_novar;    // "undefined"
typeof global_fromfunc; // "undefined"

In ES5 strict mode, working with undeclared variables (such as the two negative examples in the previous code snippet) will throw an error .

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 required by the function

Prevents variables from being defined before they are defined The logic errors used

help you remember the declared global variables, so there are fewer global variables //zxx: I am a little confused here...

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 using a var statement, separated by commas. It's a good idea to initialize variables and values ​​at the same time like this. This prevents logic 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, such as whether they are to be used as objects or as integers.

You can also do some actual work when declaring, such as sum = a + b in the previous code. Another example is when you use DOM (Document Object Model) reference, you can use a single var Specify local variables together with DOM references, as shown in the following code:

function updateElement() {
   var el = document.getElementById("result"),
       style = el.style;
   // 使用el和style干点其他什么事...
}

vars variable preparsing

In JavaScript, you can declare multiple var statements anywhere in a function, and they will appear as if they are at the top of the function Declarations work the same way, this behavior is called hoisting (suspending/top parsing/pre-parsing). Logic errors can occur when you use a variable and then redeclare it later in a function. For JavaScript, as long as your variable is in the same scope (same function), it is considered declared, even when it is used before the var declaration. Look at the following example:

// 反例
myname = "global"; // 全局变量
function func() {
    alert(myname); // "undefined"
    var myname = "local";
    alert(myname); // "local"
}
func();

In this example, you may think that the first alert pops up "global", and the second alert pops up "loacl". This expectation is understandable, because at the time of the first alert, myname was not declared. At this time, the function must naturally look at the global variable myname, but this is not actually how it works. The first alert will pop up "undefined" because myname is treated as a local variable of the function (even though it is declared later), and all variable declarations are suspended to the top of the function. Therefore, to avoid this confusion, it is best to pre-declare all variables you want to use.

The above code snippet might behave like this:

myname = "global"; // global variable
function func() {
   var myname; // 等同于 -> var myname = undefined;
   alert(myname); // "undefined"
   myname = "local";
   alert(myname); // "local"}
func();

For the sake of completeness, let’s mention something slightly more complicated at the execution level. Code processing is divided into two stages. The first stage is variable, function declaration, and parameter creation in normal format. This is a stage of parsing and entering context. The second phase is code execution, where function expressions and unqualified identifiers (for declared variables) are created. However, for practical purposes, we will adopt the concept of "hoisting", which is not defined in the ECMAScript standard and is generally used to describe behavior.

Accessing global objects

In the browser, the global object can be accessed from anywhere in the code through the window attribute (unless you do something outrageous, such as declaring a local variable named window). But in other contexts, this convenience property might be called something else (or even not available in the program). If you need to access the global object without a hard-coded window identifier, you can do the following in function scope at any level:

var global = (function () {
   return this;
}());

这种方法可以随时获得全局对象，因为其在函数中被当做函数调用了（不是通过new构造），this总是指向全局对象。实际上这个病不适用于ECMAScript 5严格模式，所以，在严格模式下时，你必须采取不同的形式。例如，你正在开发一个JavaScript库，你可以将你的代码包裹在一个即时函数中，然后从全局作用域中，传递一个引用指向this作为你即时函数的参数。