Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "what are the differences between the scope of es5 and es6", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "what is the difference between the scope of es5 and es6" can help you solve your doubts.

Difference: there are only two scopes in es5: global scope and function scope, while there are global scope, function scope and block-level scope in es6. The role of block-level scope: it can solve the problem that the promotion of inner scope variables causes the outer variables to be overwritten and prevents the variables used for loop counting from leaking into global variables.

The operating environment of this tutorial: windows7 system, ECMAScript version 6, Dell G3 computer

The difference between es5 and es6 in scope:

There are only two scopes in es5: global scope and function scope

There are three scopes in es6: global scope, function scope and block scope.

There are only global scope and function scope in Es5

Variables are declared with var in ES5, and variables declared by var may exist in the global scope or in the local scope, as follows

1. Global scope

Three situations with global scope

a. Variables declared outside the function have global scope

b. Variables that are not directly assigned are automatically declared as global variables

C. the properties of the window object have global scope

two。 Local scope (function scope)

The scope of variables in the body of functions

Variables defined within a function can only be accessed within a function

Examples

Var a = 1; console.log (a); / / 1 where an is a global variable, which can be accessed in the global scope to get b = 2 console.log (b); / / 2 where b is not defined by var, but is directly assigned, automatically declared as the global variable function fun () {var c = 3; console.log (c) / / 3 where c exists in the function scope and can only be accessed in the function fun} fun () console.log (c); / / the variable c in the function scope is accessed under the global scope of undefined to get the new block-level scope in undefinedEs6.

Block-level scope can be simply understood as: the content wrapped in curly braces {} can form a scope of its own. Variables in block-level scope are declared by let and const

Why do you need block-level scope?

1. Solve the problem that the inner scope variable is promoted and the outer variable is overwritten.

Var I = 5 function fun () {console.log (I); / / undefined if (true) {var I = 6 console.log (I); / / 6}} fun ()

Execution result

The variable I in the function fun uses var declaration, which involves the problem of variable promotion, that is, function declarations and variable declarations are always quietly "promoted" to the top of the method body by the interpreter. So the I here is equivalent to advancing to the top of the function fun, but the assignment is still done when I = 6 is running, and the above code is actually equivalent to:

Var I = 5 X function fun () {var I; console.log (I); if (true) {I = 6 console.log (I)}} fun ()

When the first I is printed, I is only declared and not assigned (I is assigned as 6 in the if statement), so the first printed I is undefined and the second printed I is 6

Var I = 5 function fun () {console.log (I); / 5 if (true) {let I = 6 console.log (I); / / 6}} fun ()

If you use let to declare the variable I in if, the curly braces {} where the if statement is located will form a block-level scope, and the variables declared in this scope will be "bound" in this area and will no longer be affected by external influence (that is, temporary dead zone), so the first I output when executing the fun function is the let iTunes 6 declared in the block-level scope in the var iDiff5 if statement under the global scope.

two。 Prevent variables used for loop counting from leaking to global variables

For (var I = 0; I < 3; iTunes +) {doSomething ()} console.log (I) / / 3

The above code declares the I variable for the loop with var. Ideally, I should only be valid in the loop body, but the I here is exposed and in the global scope, so the value of I can still be accessed under the global action after the loop ends.

For (let I = 0; I < 3; iTunes +) {console.log (I)} console.log (I) / / undefined

If I is declared using let with block-level scope, the I variable declared here is only valid in for loop curly braces {}, and accessing variables in block-level scope in the global scope will result in undefined

Block-level scope characteristics

1. The variables declared by let are only valid in scope (within the current curly braces), so arbitrary nesting is allowed, and each layer is scoped separately.

two。 Inner scope can have the same name as outer scope variable (no scope does not interfere with each other)

3. Let can only exist at the top level of the current scope

Note: in {} in if statement and for statement, if there are variables / constants declared by let or const, the scope of the {} also belongs to the block scope.

An example of scope

{var a = 1; console.log (a); / / 1} console.log (a); / / 1 / / visible, variables defined by var can be accessed across block scopes. (function A () {var b = 2; console.log (b); / / 2}) (); / / console.log (b); / / report an error, / / it can be seen that variables defined by var cannot access if (true) {var c = 3 across functional scopes } console.log (c); / / 3 for (var I = 0; I < 4; iTunes +) {var d = 5;}; console.log (I); / / 4 (end of loop I is already 4, so here I is 4) console.log (d) / / 5 / / variables defined with var in if statements and for statements can be accessed outside. / / it can be seen that if statements and for statements belong to block scope, not function scope. {var a = 1; let b = 2; const c = 3; {console.log (a); / / 1 child scope can access the parent scope variable console.log (b) / / 2 child scope can access the parent scope variable console.log (c); / / 3 child scope can access parent scope variable var aa = 11; let bb = 22; const cc = 33 } console.log (aa); / / 11 / / variables that can be accessed across blocks to the subblock scope / / console.log (bb); / / error bb is not defined / / console.log (cc) / / error cc is not defined} read here, this article "what is the difference between es5 and es6 scope" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.