JavaScript variable scope

JavaScript variable scope

Variable scope is a topic involved in every programming language. It is also a required knowledge point for a programmer. It is helpful for you to deeply understand the variable scope and write stable programs. JavaScript itself, as a simple language, is just as dizzy with the variable scope issue, mainly because of the existence of JavaScript closures. This article does not explain in depth the scope of JavaScript variables (in fact, I am not able to talk about this topic more deeply), nor does it talk about the "closure" topic, this article only discusses the most practical knowledge of JavaScript scopes.

I. JavaScript SCOPE CLASSIFICATION

JavaScript has two scopes: Global (window) and function-level (function ). Function level (function) cannot be understood as "block level (braces {} level )".

Ii. Differentiate and define JavaScript global variables and local variables

1.1 variables defined on the outermost side of all functions are global variables that are defined using or without the var keyword. The global variable is actually parsed as an attribute of the window object, so we can access it using the "window. global variable name" method. We recommend that you directly use the variable name to access it without any need. The following example demonstrates the most common way to define global variables:

1.2 global variables can be defined and obtained in the same function (local variable runtime environment. Instead of using the var keyword, you can easily obtain the global variable content in a local environment and use the global variable name for reference. Note: If the function defines a local variable with the same name as the global variable, the function uses its local variable first, if you want to use a local variable with the same name, add the window prefix. Example:

2.1 If the var keyword is used, the variable defined in the function body is a local variable, which can be used by all the statement blocks ({}) and subfunctions below. This variable can be accessed anywhere in the function, but it cannot be accessed "directly" outside the function (Closure allows indirect access, or proxy access, this knowledge point is not covered in this article ). Example:

2.2 The variables of the parent function can be accessed by the quilt function, but the variables of the Child function cannot be accessed by the parent function. Obviously, this is consistent with the function-level scope we mentioned at the beginning. It seems like dad is better, and his son is mean. Example:

3. Notes and tips

1. To avoid confusion or overwriting of variables, do not forget the definition of local variables.Add the VaR keyword(If necessary, after the variables are usedActive releaseIt, that is, "variable name = NULL"). We also recommend that you set all variables at the beginning of each function. Example:

2. clever use of anonymous functions,Reduce naming conflicts or variable pollution. The following two sections of Code actually implement the same function, while the first section of code can be written with the variable name you want to use in that anonymous function, you don't have to worry about overwriting variables defined by others or defined elsewhere.

3. It is not recommended to be in a function that does not need to be instantiated.Use this to access global variables instead of window. Generally, functions using the this keyword should be processed as JavaScript classes (I like to use "CLS" as the class name prefix ). If the following functions are called only as common functions, this keyword should not appear, because this is usually used to operate a global variable. Example: