JavaScript you don't know, function scope and block scope

Scope in a function

The so-called function scope, that is, all the variables that belong to this function can be used and reused throughout the scope of the function.

 1  function   foo (a) { 2  v AR  b=A;  3  function   Bar (c) { 4  var  c=b*2;  5   Console.log (c);  6  }  7  Bar (); // 4  8  }  9  foo (3); 

1     functionFoo (a) {2         varb=A;3         functionBar (c) {4             varC=b*2;5 Console.log (c);6         }7 bar ();8     }9Bar (2);//Not defined

Naming conflicts

In the same scope, the same naming can cause conflicts.

1     functionfoo () {2         functionBar (a) {3I=3;4Console.log (i+a);5         }6          for(vari=0;i<10;i++){7 bar (i);8         }9     }TenFoo ();

The code above will cause a conflict, and the function will continue to execute, and the line would be a dead loop.

How do you avoid naming conflicts?

(1) Global namespace

Some third-party libraries usually declare a unique object in the global object, and the library's methods and instances are all in this object, and it's good to call this unique object directly when we call it.

  1  var  mylibrary={  2  param1: ' param1 ' ,   3  dosomething:function    4   5  ",   6  doelsething:func tion   () {  7   8  }   9 //  ...  10 } 

(2) Module management

Another way to avoid collisions is close to the current module mechanism, which is to pick one of the many module managers to use. Using these tools, any library does not need to add identifiers to the global scope, but instead imports the library's identifiers into another specific scope through the mechanism of the dependency manager

Execute function

Wrap the function in a pair of parentheses to make it an expression, and then add a parenthesis to it to execute it, so that the function will be self-executing. This model is also called Iife.

The self-executing function is written in two forms, the first of which is to write the entire function in parentheses, and then add a pair of parentheses outside the parentheses: (function () {//do something});

Another is: (function () {//do Something} ()).

Both of these functions are the same.

Self-executing function pass parameter

1     (function(doc) {2         var a= ' button '; 3         Doc.getelementbyid (' btn '). innertext=A; 4     }) (document);

Block scope

When we write a for loop, we all want I to play a role in the context of the loop, and in fact I will be bound to the scope in which he is located. Example of a naming conflict above.

So how to solve the problem of block scope?

(1) Use the self-executing function to wrap the loop and set the private scope.

1     functionFoo (a) {2         functionBar (a) {3I=3;4Console.log (A +i);5         }6(function(){7              for(vari=0;i<10;i++){8 bar (i);9             }Ten         })(); One     } AFoo (3);//3 4 5 6 7 8 9

(2) using the Let in ES6
The Let keyword implicitly hijacked the scope of the variable it declares, and the above example can be changed to:

1     functionFoo (a) {2         functionBar (a) {3I=3;4Console.log (A +i);5         }6          for(Let i=0;i<10;i++){7 bar (i);8         }9     }TenFoo (3);//3 4 5 6 7 8 9

(3) const in ES6 also creates a block-level scope.
Const can create a block-level scope, but he represents a constant. Modifying the value of a const-created variable will cause an error.

1     varfoo=true;2 3     if(foo) {4         vara=2;5Const B=3;6 7A=3;//Normal8b=4;//Error9     }Ten  OneConsole.log (a);//3 AConsole.log (b);//b is not defined

JavaScript you don't know, function scope and block scope