作用域和闭包理解

作用域

作用域（scope，或译有效范围）就是变量和函数的可访问范围。分全局/局部(函数)作用域。

全局/局部变量，变量生命周期：
局部变量在函数执行完毕后销毁。js中函数内部可以读取全局变量，函数外部不能读取函数内部的局部变量。
全局变量在页面关闭后销毁。在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

块级作用域。（var\let\const）

闭包

闭包可以让你从内部函数访问外部函数作用域。并且闭包能让函数的内部变量（局部变量）始终保存在内存中。

function f1() {
    var n = "Mozilla";
    function f2() {
        alert(n);
    }
    return f2;
}

var m = f1();
m();

闭包：f2可以读取f1中的变量，只要把f2作为返回值，就可以在f1外读取f1内部变
原因：f1是f2的父函数，f2被赋给了一个全局变量，f2始终存在内存中，f2的存在依赖f1，因此f1也始终存在内存中，不会在调用结束后，被垃圾回收机制回收。

JavaScript中的函数会形成了闭包。 闭包是由函数以及声明该函数的词法环境组合而成的。该环境包含了这个闭包创建时作用域内的任何局部变量。在本例子中，m 是执行 f1 时创建的 f2 函数实例的引用。f2 的实例维持了一个对它的词法环境（变量 n 存在于其中）的引用。因此，当 m 被调用时，变量 n 仍然可用，其值 Mozilla 就被传递到alert中。

闭包用途

1、读取函数内部的变量
2、让这些变量的值始终保持在内存中。不会再f1调用后被自动清除。
3、方便调用上下文的局部变量。利于代码封装。

闭包的应用

闭包应用场景之封装变量

//用闭包定义能访问私有函数和私有变量的公有函数。
    var counter = (function(){
        var privateCounter = 0; //私有变量
        function change(val){
            privateCounter += val;
        }
        return {
            increment:function(){   //三个闭包共享一个词法环境
                change(1);
            },
            decrement:function(){
                change(-1);
            },
            value:function(){
                return privateCounter;
            }
        };
    })();

    console.log(counter.value());//0
    counter.increment();
    counter.increment();//2
    //共享的环境创建在一个匿名函数体内，立即执行。
    //环境中有一个局部变量一个局部函数，通过匿名函数返回的对象的三个公共函数访问。

闭包应用场景之setTimeout

 //原生的setTimeout传递的第一个函数不能带参数
    setTimeout(function(param){
        alert(param)
    },1000)


    //通过闭包可以实现传参效果
    function func(param){
        return function(){
            alert(param)
        }
    }
    var f1 = func(1);
    setTimeout(f1,1000);

闭包应用场景之回调

/**
     * 解决方法1     通过函数工厂，则函数为每一个回调都创建一个新的词法环境
     */
    function showContent(content){
        document.getElementById('info').innerHTML = content;
    };

    function callBack(content){
        return function(){
            showContent(content)
        }
    };

    function setContent(){
        var infoArr = [
            {'id':'email','content':'your email address'},
            {'id':'name','content':'your name'},
            {'id':'age','content':'your age'}
        ];
        for (var i = 0; i < infoArr.length; i++) {
            var item = infoArr[i];
            document.getElementById(item.id).onfocus = callBack(item.content)
        }
    }
    setContent()

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
https://www.runoob.com/js/js-scope.html