In-depth analysis of preparsing and side effects in JavaScriptvar

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 other than 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 through 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, undeclared variables (such as the two negative teaching materials in the previous code snippet) When working it throws an error.

Single var form

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

Provides a single place to go Find all local variables needed for the function

Prevents logic errors where variables are used before they are defined

Helps you remember declared global variables, so there are fewer global variables //zxx:here I'm a little confused myself...

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 use one var statement to declare multiple variables, 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) references, you can Use a single var to specify DOM references together as local variables, 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 Declaring multiple var statements anywhere in a function and having them function as if they were declared at the top of the function is called hoisting. 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 how it actually 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 declare all the variables you want to use in advance.

The above code snippet may behave like the following:

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 normal format parameter creation. 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 the global object

In the browser, the global object can be accessed 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;
}());

This method can obtain the global object at any time Object, because it is called as a function in the function (not constructed through new), this always points to the global object. Actually this bug doesn't apply to ECMAScript 5 strict mode, so you have to take a different form when in strict mode. For example, if you are developing a JavaScript library, you can wrap your code in an immediate function, and then pass a reference to this from the global scope as a parameter of your immediate function.

The above is the detailed content of In-depth analysis of preparsing and side effects in JavaScriptvar. For more information, please follow other related articles on the PHP Chinese website!