闭包以及闭包的应用详解

闭包

来自红宝书的定义:
闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另一个函数

1. 理解闭包,首先的了解JavaScript的作用域的特点
javascript语言的特别之处就在于:函数内部可以直接读取全局变量,但是在函数外部无法读取函数内部的局部变量。
注意点:在函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明的是一个全局变量!
有权访问另一个函数作用中的变量的函数
自己的闭包理解:闭包只是一种现象 ,内部函数可以使用外部函数环境中的变量,什么时候会产生闭包的现象呢
当内部函数被保存到外部时,将会生成闭包。闭包会导致原有作用域链不释放,造成内存泄露。


function f1(){
   

      var n=999;
  
      function f2(){
   
          console.log(n); // 999
      }
       return f2()
    }
  f1 ()

这个代码就形成了闭包的现象
在上面的代码中,函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1就是不可见的。既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗!

闭包的小应用

function a() {
   
  var num = 100;
  function b () {
   
    num ++;
    console.log (num);
  }
return b;
}
var demo = a();
demo() ;//101
demo() ;//102

执行demo()得到的是什么呢?

第二个闭包的例子


function a() {
   
  function b() {
   
    var bbb = 234;
    console.log(aaa);
  }
  var aaa = 123;
  return b;
}
var glob = 100;
var demo = a();
demo();

来看看运行结果吧

具体执行,看看这个图

2. 闭包的用途
* 一个是前面提到的可以读取函数内部的变量,* 另一个就是让这些变量的值始终保持在内存中,不会在外层函数调用后被自动清除。

  • 实现公用变量
    eg:函数累加器
function add( ) {
   
    var count = 0;
    function demo() {
   
    count ++;
    console.log (count);
    }
    return demo ;
  }
    var counter = add() ;
    counter() ;
    counter() ;
    counter() ;
    counter() ;
    counter() ;

  • 可以做缓存
 function test() {
   
      var num=100;
      function a () {
   
      num ++;
      console . log(num) ;
      }
      function b () {
   
      num --
      console.log(num) ;
      }
      return [a,b];
      }
      var myArr = test( ) ;
      myArr[0]();
      myArr[1]();


其实过程是这样的

体现缓存的例子

function eater() {
   
  var food = '';
  var obj = {
   
    eat: function () {
   
      console.log("i am eating " + food);
      food = '';
    },
    push: function (myFood) {
   
      food = myFood;
    }
  }
  return obj;
}
var eater1 = eater();
eater1.push( ' banana' ) ;
eater1.eat() ; 


这个时候ester里面的food就相当于一个隐式的存储结构

  • 可以实现封装,属性私有化
function Sun(name, wife) {
   
    var prepareWife = "xiaozhang";
    this.name = name;
    this.wife = wife;
    this.divorce = function () {
   
        this.wife = prepareWife;
    }
    this.changePrepareWife = function (target) {
   
        prepareWife = target;
    }
    this.sayPraprewife = function () {
   
        console.log(prepareWife);
    }
}

var deng = new Deng('deng', 'xiaoliu');
deng.prepareWife //undefined
deng.sayPraprewife() //xiaozhang
  • 模块化开发,防止污染全局变量
  1. 闭包的注意点
    (1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
    (2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

来看看闭包的题目吧

 // }

        // test();
        function test() {
   
            var arr = [];
            for (var i = 0; i < 10; i++) {
   
                arr[i] = function () {
   
                    console.log(i);
                }  
            }
            return arr;
        }

        var myArr = test();
        for (var j = 0; j < 10; j++) {
   
            myArr[j]();
        }
        //打印的是10个10,因为在函数10函数执行的时候上面的循环已经结束了,这个时候i已经变成了10啦
        


But,我们一般要避免这个闭包这么实现呢,现在我们需要的是输出0-9,上面的代码该怎么改呢???
实际上我们利用闭包和立即执行函数就能解决这个问题,被放进数组里面的函数保存到外部执行的时候,在作用域链上找j的时候都会使用立即执行函数中j,而每次循环立即执行函数都会被销毁


function test() {
   
    var arr = [];

        for (var i = 0; i < 10; i++) {
   
           ( function (j) {
   
            arr[j] = function () {
   
                console.log(j);
            }
            }(i))   
        }
    return arr;
}

var myArr = test();
for (var j = 0; j < 10; j++) {
   
    myArr[j]();
}

tip:>(免费获取最新完整前端课程关注vx公众号:前端拓路者coder,回复:资料
如果这个文章对你有用的话,欢迎点赞转发关注,让更多的小伙伴看到呀,毕竟分享是一个程序员最基本的美德!!!
如果有不对的请大佬指教)

全部评论

相关推荐

09-20 09:17
已编辑
中国矿业大学 机械设计师
大连理工大学机械工程师:拖拉机研究院1.5
点赞 评论 收藏
分享
10-16 19:39
已编辑
门头沟学院 Java
小马云表哥:03男巨蟹座,喜欢家暴,爱好出轨,吃喝嫖赌样样精通,收入不固定,主要看女方给我多少钱,不会做家务,不会做饭,身高155体重190,爱玩马超,喜欢玩火影,喜欢陪岳父岳母爬山 爱玩原神😋
点赞 评论 收藏
分享
点赞 收藏 评论
分享
牛客网
牛客企业服务