Scopes and namespaces

Scope

In any case, a function is the only structure that has its own scope, and no other form of structure supports scopes. The code looks like this

var demo = function () {...};

Or

Function demo () {...};

There is no explicit namespace definition in the JavaScript language, meaning that all objects are defined in a globally shared namespace

When referencing a variable, traverse the current scope and global scope up and down until the variable is found

Implicit global variables and local variables

Within the scope of the function itself, if the variable declaration does not use the var expression, the function will cause an implicit global variable to be generated. Let's look at the code below.

var demo = function () {number = 1;}; Demo ();

Or

var demo = function () {for (number = 0; number < 5; number + +) {...};}; Demo ();

The run result declares a global variable number, and if you do not want to declare or overwrite a variable of the same name within a global scope, you must use the var expression. The code looks like this

var demo = function () {var number = 1;}; Demo ();

Or

var demo = function () {for (var number = 0; number < 5; number + +) {...};}; Demo ();

The run result declares a local variable number that is valid only within the current scope.

Variable declaration elevation (hoisting)

Variable declarations are promoted in the JavaScript language, meaning that var expressions, function declarations are promoted to the top of the current scope. Let's look at the code below.

Demo (); var demo = function () {...};

Or

Demo (); function demo () {...};

Before the code is executed, it is converted to

var demo;demo ();d emo = function () {...};

Or

Function demo () {...}; Demo ();

The result of the first code execution fails, the second code executes successfully, because the demo is only declared when the first code executes, but still the default value is undefined

What is interesting is the elevation of the local variable declaration. And look at the code below.

var number = 0;var demo = function () {if (true) {number = 1;} Else{var number = 2;}; Console.log (number);}; Demo (); Console.log (number);

Before the code is executed, it is converted to

var number, Demo;number = 0;demo = function () {var number;if (true) {number = 1;} Else{number = 2;}; Console.log (number);}; Demo (); Console.log (number);

The output is 1, 0; The code that should overwrite the global variable number is converted to declare a local variable number, and if you want to overwrite the global variable number, you must cancel the use of the VAR expression. The code looks like this

var number = 0;var demo = function () {if (true) {number = 1;} Else{number = 2;}; Console.log (number);}; Demo (); Console.log (number);

Output is 1, 1

Name space

Only one global scope causes a naming conflict, and the solution is an anonymous wrapper, which is the function of creating a new namespace. Let's look at the code below.

(function () {...}) ();

Since the anonymous function is considered an expression, in order to be callable, it needs to be executed in advance, we can interpret the self-executing anonymous function as an anonymous wrapper. And look at the code below.

(//parentheses function in advance to execute functions () {...}) Returns the function object (); Executes an anonymous function immediately and invokes the above execution result as a function object

Creating namespaces through anonymous wrappers not only prevents naming conflicts, but also facilitates the modularity of programs

There are other function expressions that call methods. The code looks like this

+function () {...} ();(function () {...} ());

Scopes and namespaces