美文网首页
JavaScript闭包

JavaScript闭包

作者: 可以秀但没必要 | 来源:发表于2020-06-08 11:52 被阅读0次

    一、概念

    1.函数执行形成一个私有的作用域,保护里面的私有变量不受干扰,这种保护机制称之为“闭包”。
    2.形成一个私有不销毁的作用域
    3.闭包是基于词法作用域书写代码时所产生的自然结果,当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行。(参考你不知道的JavaScript)

    以上定义来源于参考视频,它的本质是形成一个不销毁的栈内存。如果需要深入了解闭包的概念,还需要了解JS中的作用域查找机制

    二、闭包的应用

    2.1 函数柯里化

    function add(n){
      return function(i){
        return n+i
      }
    }
    

    2.2 自执行函数

    var utils = (function (){
       return {
       }
    })()
    

    三、闭包的作用(举个例子,代码内容不重要)

    3.1 保护

    保护的作用在自执行函数的应用方面的体现。

    (function(win, doc){
        var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        refresh = function () {
            var w = docEl.clientWidth,
            dpr = win.devicePixelRatio || 1;
            docEl.style.fontSize = 100 * (w/375) + 'px';
            function setBodyFontSize () {
                if (doc.body) {
                    doc.body.style.fontSize = '16px';
                }else {
                    doc.addEventListener('DOMContentLoaded', refresh)
                }
            }
            setBodyFontSize();
        };
        refresh();
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, refresh, false);
    })(window, document);
    

    以上代码在自执行函数中创建了大量的私有变量,外界是无法对其进行修改的,起到了保护变量的作用。

    3.2 保存

    保存的用法在函数柯里化方面的体现。

    function add(n){
      return function(i){
        return n+i
      }
    }
    
    var addOne = add(1)
    var a = 1
    var b =addOne(a)
    console.log(b) //=>2
    

    四、总结

    闭包是指函数脱离原本的词法作用域之后仍可以访问原本词法作用域的情况。

            var fn = (function(){
                var t = 1
                return function(){    
                    console.log(t,p)
                }
            })()
    
            /*情况1:fn脱离原始的词法作用域,但是还是可以访问原始作用域的内容
    而p可以输出是因为这种情况下,p在window上面,仍可以找到*/
            var p = 2
            fn()   //=> 1,2
    
            /*情况2:当p不在window上面时,无法输出p,说明fn的词法作用域不变*/
            function tttt(){
                var p = 3
                fn()
            }
            tttt()  //=>Uncaught ReferenceError: p is not defined
    

    参考

    视频资料
    https://www.cnblogs.com/bgwhite/p/9485507.html

    相关文章

      网友评论

          本文标题:JavaScript闭包

          本文链接:https://www.haomeiwen.com/subject/qqhltktx.html