闭包

发表于 | 分类于

模块化

  1. 各种全局变量

    1
    2
    3
    4
    5
    6
    7
    8
    var $topbar = $('#topbar')
    $topbar.on('click',functuion(){
      console.log('topbar')
    })
    var $banners = $('#banners')
    $banners.on('click',function(){
      console.log('banners')
    })

  2. 用立即执行函数消除全局变量（或者用{}块级作用域+let）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    !function(){
      var $topbar = $('#topbar')
      $topbar.on('click',functuion(){
        console.log('topbar')
      })
    }()   //让这些变量变成局部变量，放进一个函数里并且调用，但是函数前要加上一个符号（+,-,!等）
    !function(){
      var $banners = $('#banners')
      $banners.on('click',functuion(){
        console.log('banners')
      })
    }()
    ------------------
    {
      let $topbar = $('#topbar')
      $topbar.on('click',functuion(){
        console.log('topbar')
      })
    }   //或者用es6语法:块级作用域，局部变量

  3. 按照上述方法，作用域与作用域之间是隔开的，如果作用域B想使用作用域A的变量，怎么办？可以使用两个作用域都能访问到的全局变量window，作为桥梁，赋值给window属性并访问

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    !function(){
      var $topbar = $('#topbar')
      var user = {
        name:'yom',
        age:20
      }
      window.user = user   //全局变量
    }() 
    !function(){
      console.log(window.user)
    }()

    如果不能让别的作用域改user，只能读（暴露一个函数，不要暴露整个变量）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    !function(){
      var $topbar = $('#topbar')
      var user = {
        name:'yom',
        age:20
      }
      window.user = {
        nameGetter:function(){return user.name},
        ageGetter:fucntion(){return user.age}
      }
    }() 
    !function(){
      console.log(window.user.nameGetter)    //yom
    }()

    什么时候闭包：只要一个函数使用了它外面的变量，这个函数就是闭包，闭包是指这个函数以及它能访问到的这个变量。闭包是作用域的一种特殊的使用方式。

  4. 举例：年龄增长器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function olderMaker(){
      var user = {
        name:'jack',
        age:18
      }
      return function(){
        user.age += 1
      }
    }
    var older = olderMaker()  //函数
    older.call()  每call一下，年龄增加一岁

    ​