每天3小时学前端之JS-第17天-闭包2

此系列体验视频教程

点击观看：哔哩哔哩

闭包

闭包的应用

步数累加器

// 全局变量写法
var step = 0
 function record() {
   return ++step
 }
 console.log(record());
 console.log(record());
 console.log(record());

// 函数对象属性写法
function record() {
  return ++record.step
 }
 record.step = 0
 console.log(record());
 console.log(record());

// 立即执行函数写法
var record = (
   function () {
    var step = 0
    return function () {
      return ++step
    }
   }()
 )
 console.log(record());
 console.log(record());

// 闭包基本写法
function record() {
   var step = 0
   return function () {
     return ++step
   }
 }
 var r = record()
 console.log(r());
 console.log(r());

// 闭包增强写法
 function record(step) {
  // var step = 0
  return {
    add: function () {
      return ++step
    },
    reset: function () {
      step = 0
    },
    print: function () {
      console.log(step);
    }
  }
 }
 var r = record(10)
 r.add()
 r.add()
 r.print()
 r.reset()
 r.print()
 r.add()
 r.add()
 r.print()

定义模块

index.html文件

<script src="02-1.js"></script>
<script src="02-2.js"></script>

<script>
// 模块：一块封闭的空间，各个模块之间的变量是彼此分割的。
var f = info()
console.log(f);
f.setAge(16)
console.log(f.getAge());

info2.setAge(19)
console.log(info2.getAge());
</script>

02-1.js文件

function info() {
  var _age // 私有变量
  function getAge() { // 获取年龄
    return _age
  }
  function setAge(age) { // 修改年龄
    _age = age
  }
  return { // 灵活提供给外部方法
    getAge: getAge,
    setAge: setAge
  }
}

02-2.js文件

(
  function (w) { // 立即执行函数的形参
    var _age
    function getAge() {
      return _age
    }
    function setAge(age) {
      _age = age
    }
    w.info2 = {
      getAge: getAge,
      setAge: setAge
    }
  }(window) // 立即执行函数的实参
)

作业

// 定义函数fnArr，执行函数后返回一个数组，数组中保存各个函数，可以返回对应的索引，数组如下。注：返回的0、1、2等应该为变量。
/* 
  [
    function() {
      return 0 // 变量
    },
    function() {
      return 1 // 变量
    },
    function() {
      return 2 // 变量
    },
    ...
  ]
*/
var fns = fnArr()
console.log(fns[0]()); // 0
console.log(fns[1]()); // 1
console.log(fns[2]()); // 2