Just five sentences to get the JavaScript scope (classic)

The scope of JavaScript has always been a knowledge point that is difficult to understand in front-end development. Remember a few words about the scope of JavaScript. You are not afraid of traveling around the world...

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.

425762-20160707114743577-37359182.png

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';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 what the editor introduced to you to solve the JavaScript scope (classic) in just five sentences. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!