Story Mode Prototype chain (5) - JS variable scope, the scope chain, closure - Code World

JS execution context in the previous chapter, variable lift, function declarations Portal: HTTPS: //segmentfault.com/a/11 ...

This time we mainly talk about variable scope and closure
variable scope:
As the name suggests: variable acting range.
Variables into the global and local variables.
Global variables: anywhere can be used, in addition to all functions.
Local variables: only, as well as its sub-function is used in the definition of its function.

The current scope of the variable is not defined, called free variables.

for example:

<!DOCTYPE html>
<html>
<head>
    <title>dsfg</title>
</head>
<body>
<script type="text/javascript">
    var g = 'globle';
    function fn(){
        var p = 'part';    
        console.log(g);//globle
        console.log(p);//part
    }
    fn();
    console.log(g);//globle
    console.log(p);//报错： p is not defined
</script>
</body>
</html>

In the example above, g is a global variable is not present in any function can be used anywhere.
p is a local variable, fn can only be used in the function. Use will be given externally.

Scope chain:
variable function in the search scope, do not look at the implementation of which, just look at what the definition.

for example:

<!DOCTYPE html>
<html>
<head>
    <title>dsfg</title>
</head>
<body>
<script type="text/javascript">
    var a = 100;
    function fn1(){
        var b = 200;
        
        function fn2(){
            var c = 300;
            console.log(a);//100
            console.log(b);//200
            console.log(c);//300
        }
        fn2();
    }
    fn1();
</script>
</body>
</html>

A variable to be resolved, the above-described examples embodied in the scope chain. When performing console.log (a), first look for a variable in fn2 - did not go to the parent fn1 fn2 find, can not find. And then to find fn1 parent, which is a global variable to find, and finally found it. Like this look up layer by layer, called variable scope chain.
If any one of them is found, it will not continue to look upward.

Closure:
a definition: access to scope variables in another function. So the closure is actually a function.

Why closure it?
Local variables can not be shared and long-term preservation, global variables, it is very likely to cause pollution variables. Closure is able to continue to preserve variables, and does not pollute.
Closure Features: more memory consumption is not likely to be released.
Closure be used: 1. as a function return value (a function Retrun)

         2.函数作为参数传递到另一个函数中。

for example:

<!DOCTYPE html>
<html>
<head>
    <title>lalala</title>
</head>
<body>
<script type="text/javascript">
    function fn(){
        var a = 100;
        return function(){
            console.log(a);
        }
    }
    var f1 = fn();
    var a = 200;
    f1();//100
</script>
</body>
</html>

1. Define the outer function, local variables are secured to the package.
2. Define the inner function, performing the function of external variables operation.
3. When the object function returns the inner function layer, and an outer layer function is called, the result is stored in a global variable.

Performing f1 (), a function is not defined in the current, to the parent to find fn a = 100, so = 100 A;
( function variable scope is not performed to see where, where the definition of look )

OK, OK, jS crosses two of the three big mountains, left an asynchronous, single-threaded ~

Story Mode Prototype chain (5) - JS variable scope, the scope chain, closure

Guess you like