Js foundation (2) scope chain and closure related

1. Execution context

An execution context is generated in a script or a function scope

In the global execution context, js will extract variables and function declarations

In the function execution context, the variable definition function declaration in the function will be extracted before the function execution this arguments

 

 2, this points to

Execute as a constructor

Execute as object property

normal function execution

call apply bind method execution

this will only change the pointer definition when it is executed this will not point to any object js is an interpreted language not a definition type

3. Scope chain

The function scope chain is the opposite of this, this is only confirmed at execution time, and the scope chain is that the function has been determined at the time of definition.

Free variables Variables that are not defined in the current function are called free variables Official explanation: Closure is the abbreviation of Lexical Closure, which is a function that references free variables. The referenced free variable will exist with the function, even if it has left the environment in which it was created. The previous code explained the closure

    <script>
        function fn1(){
            var a = 10
            return function(){
                return a
            }
        }
        var a = 100
        var fn = fn1()
        console.log(fn)
        console.log(fn())
        
    </script>

The above output result is 10, that is to say, when the function is defined, its scope chain has been fixed, and its scope and referenced free variables have been fixed when the function is defined. No matter where the function refers to calling its own internal variables, It won't change anymore. In theory, any function is a closure, so the main application scenario of closure is to protect variables, return functions, and pass in functions.

        function fn1(){
            var a = 10
            return function(){
                return a
            }
        }

        var fn = fn1 ()

        function fn2 (fn){
            var a = 1000
            console.log(fn())
        }

        fn2(fn)

The output is still 10. Regardless of the scope and free variables of any environmental closures, the scope and free variables of any environmental closures have been fixed. Here are two simple closure cases.

    <script>
        for(var i = 0; i < 10 ; i++){
            (function(i){
            var a = document.createElement('a')
            a.innerHTML = i + '<br/>'
            a.onclick = function(){
                alert(i)
            }
            document.body.appendChild(a)
            })(i)

        }
    </script>

Each time we execute the above, we create an independent self-executing function and then pass i in. At this time, the self-executing function will save the i variable fixedly. Here is an example of variable permissions.

        function firstIndex(){
            var _list = []
            return function(id){
                if(_list.indexOf(id) >= 0 ){
                    return false
                }else{
                    _list.push(id)
                    return true
                }
            }
        }
        var fn = firstIndex()
        console.log(fn(10))
        console.log(fn(10))
        console.log(fn(20))