Detailed explanation of JavaScript scope example

Scope is one of the most important concepts of JavaScript. If you want to learn JavaScript well, you need to understand the working principles of JavaScript scope and scope chain. Today's article introduces a detailed explanation of JavaScript scope examples, hoping to help everyone learn JavaScript better.

Any programming language has the concept of scope. Simply put, scope is the accessible scope of variables and functions, that is, scope controls the visibility and life cycle of variables and functions. In JavaScript, the scope of variables is global and local.

1. No block-level scope in JavaScript

There is a block-level scope in Java or C#, that is, braces are also a scope.

 public static void main (){if(1==1){String name = "seven";}System.out.println(name);}// Report an error public static void Main(){if(1==1){string name = "seven";}Console.WriteLine(name);}// Report an error

No block-level scope in JavaScript

 function Main(){if(1==1){var name = 'seven';}console.log(name);}// Output: seven

2. JavaScript adopts function scope

In JavaScript, each function acts as a scope, and variables in the internal scope cannot be accessed externally.

 function Main(){var innerValue = 'seven';}Main();console.log(innerValue);// Error: Uncaught ReferenceError: innerValue is not defined

3. JavaScript scope chain

Since each function in JavaScript is a scope, if a function nested function appears, a scope chain will appear.

 xo = 'alex';function Func(){var xo = "seven";function inner(){var xo = 'alvin'; console.log(xo);}inner();}Func();

For example, the above code appears in the scope chain composed of three scopes. If the scope chain appears, the order will appear when looking for variables. For the above example:

When console.log(xo) is executed, its search order is to search from the inside to the outside according to the priority of the scope chain. If the inner layer does not exist, it will gradually look up until no exception is found.

4. JavaScript's scope chain has been created before execution

The scope of JavaScript has been created before it is executed. When it is executed in the future, you only need to search according to the scope chain.

Example 1:

 xo = 'alex';function Func(){var xo = "seven";function inner(){console.log(xo);}return inner;}var ret = Func();ret();// Output result: seven

The above code already exists before the function is called:

•Global Scope->Func Function Scope->Inner Function Scope

When executing [ret();], since it refers to the inner function, the scope chain of this function has been defined as: global scope -> Func function scope -> inner function scope, so when executing [ret();], variables will be found based on the existing scope chain.

Example 2:

 xo = 'alex';function Func(){var xo = "eirc";function inner(){console.log(xo);}xo = 'seven';return inner;}var ret = Func();ret();// Output result: seven

The above code has the same purpose as Example 1, and it also emphasizes that the scope chain already exists before the function is called:

•Global Scope->Func Function Scope->Inner Function Scope

Differently, when executing [var ret = Func();], the value of the xo variable in the Func scope has been reset to "seven" from "eric", so when executing [ret();] later, you can only find "seven".

Example 3:

 xo = 'alex';<br>function Bar(){console.log(xo);}function Func(){var xo = "seven";return Bar;}var ret = Func();ret();// Output result: alex

In the above code, two scope chains have been created before the function is executed:

•Global Scope->Bar Function Scope

•Global Scope->Func Function Scope

When executing [ret();], ret refers to the Bar function, and the scope chain of the Bar function already exists: global scope -> Bar function scope, so when executing, it will be searched based on the existing scope chain.

5. Statement in advance

If you do not create variables and use them directly in JavaScript, an error will be reported:

 console.log(xxoo);// Error: Uncaught ReferenceError: xxoo is not defined

In JavaScript, if a value is created without assigning a value, the value is undefined, such as:

 var xxoo;console.log(xxoo);// Output: undefined

If this is written in the function:

 function Foo(){console.log(xo);var xo = 'seven';}Foo();// Output: undefined

The above code does not report an error but outputs undefined. The reason is that before JavaScript functions are executed, they will declare all variables in them without assigning values. Therefore, it is equivalent to the above example that the function has already executed var xo when "precompiled"; so the output of the above code is undefined.

The above is a detailed explanation of the JavaScript scope sample introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!