zoukankan      html  css  js  c++  java
  • JS闭包(1)

    1.首先看一段代码:

    var a = 1;

    function fn1(){

      var b = 2;

      function fn2(){

        console.log(a);

        console.log(b);

      }

    }

    fn1();

    我们在var b =2;这句代码打上断点,在chrome浏览器中进行调试,可以看到fn2这个函数对象有一个[[Scopes]]数组对象,里面有一个 Closure 对象,里面存放b: undefine这样一个值,也就是说保存了b变量,由于变量提升这时候还没有给b赋值,所以是undefined。这个Closure 对象就可以将其叫做fn2的闭包。

    产生闭包的条件:1.闭包是在函数对象上面2.在函数定义的时候产生(不是调用的时候)3.函数是定义在另外一个函数的内部4.函数中的代码有引用外部函数定义的数据(函数/变量)

    注:在上面的例子中fn2中引用了a,b变量,可以看作是通过作用域链向上找到的a,b变量,但是b变量会包含在fn2的闭包中,a变量不会,因为只是第一层外部函数并且不包括全局变量

    2.上面的例子理解了闭包是什么,下面看一下闭包的一些用处

    function fn1(){

      var b = 2;

      function fn2(){

        b++;

        console.log(b);

      }

      return fn2;

    }

    var fn3 = fn1();

    fn3();

    fn3();

    上面的代码将一个包含闭包的内部函数fn2作为返回值返回了回来,这样我们就可以在外面操作fn2函数。按道理说fn1函数已经执行完毕了,应该将其作用上下文销毁,b变量应该已经访问不到了。但是由于fn2还未被销毁,因为外部有指向该函数的变量fn3,fn2中的闭包又包含了b变量,所以b变量得以延迟销毁。

    上面的代码执行了两次fn3,即b++语句执行了两次。而代码运行的结果是:3 4 。说明两次执行fn3的时候操作的是用一个b变量,应为操作的b变量都是fn3的闭包上面的同一个变量。

    另一个作用是,按道理在函数的外部应该是访问不到函数内部的数据的(变量/函数),但是通过这种闭包的方式我们就可以在外部访问到内部的数据了。

    总的来说闭包的作用:1.延长了函数内变量的销毁时间2.使外部操作函数内部的数据成为可能

  • 相关阅读:
    常用SQL语句
    H5内嵌原生app
    github 从一个仓库换到另一个仓库
    vue使用install函数把组件做成插件方便全局调用
    git 支持tree命令
    vue---vue2.x自定义plugin,给vue添加全局方法,原型上增加全局方法
    vue 生命周期函数
    登录拦截设置白名单-坑
    vue
    vue实现滚动条滚到相应高度触发动画的操作
  • 原文地址:https://www.cnblogs.com/maycpou/p/12251904.html
Copyright © 2011-2022 走看看