闭包啊闭包,小带作用域

你知道闭包吗?<br />
你知道闭包是什么吗?<br />
你知道闭包作用是什么吗?<br />
你知道闭包有什么缺点吗?<br />
Emmm<br />
可以说是面试经常考的了!<br />
闭包<br />
闭包是引用了自由变量的函数,并且自由变量即便离开了创建环境,也可以和函数一起存在。<br />
这一长串的术语听的一头懵。我的理解就是,闭包就是一个函数,函数里面套函数,子函数调用父函数的变量。

function f1(){
    var a = 10;
    return function(){
        console.log(a)
    }
}
f1()    //输出10

当然,要是真的面试遇到写例子,就要根据实际应用场景啦!比如:点击按钮弹出相应的按钮值。

window.onload = function(){
    var btns = document.querySelectAll('button')
    for(let i = 0; i < btns.length; i++){
        btns[i].onclick = funciton(){
            alert(i + 1)
        }
    }
}
<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
</body>

特别注意:一定要是let不能是var哦!
var就是常见的闭包逻辑错误(小扯一下,闭包还有一个缺点就是内存无法释放)。<br />
如果不想用let的话,也可以使用自执行匿名函数替换。方法如下:

window.onload = function() {
            var btns = document.querySelectorAll('button')
    for(var i < 0; i < btns.length; i++){
        btns[i].onclick = (function(index){
            return function (index){
                alert(index + 1)
            }
        )(i)
    }
}

特点<br />
闭包函数和自由变量一同存在,即便离开创建环境,也可以和函数一起存在。<br />
闭包的本质是作用域链。<br />
这就要扯到作用域链这个专业术语的概念了。<br />
作用域:变量起作用的范围。<br />
作用域链:当前作用域有变量就用,没有就进入上一级作用域寻找,如果没有继续往上,直到全局作用域为止。
上手一道作用域链题目:

f1( );
a = 1000;
function f1(){
    var a = 100;
    var b = 10;
    function f2(){
        function f3(){
            console.log(a); //undefined
        }
        var c = 200;
        f3();
        var  a = 50;
    }
    f2();
}

这题完全可以用作用域链解释。当前作用域有变量就用,没有就进入上一级作用域寻找。到f2里面,存在一个变量提升,a先定义未赋值,然后执行f3()。所以输出a为undefined。
今天就先总结这些坑,希望看见的童鞋可以避免,我来当你们的填坑人哦。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容