前端学习之函数式编程—闭包

Posted 2021-08-31 萌萌的DDD

闭包

Part 01 闭包的概念

• 闭包(closure):函数和其周围的状态(词法环境)的引用捆绑在一起形成闭包.
  •  可以在另一个作用域中调用一个函数的内部函数并访问到该函数作用域中的成员

// 函数作为返回值

function makeFn() {
    let msg = 'hello function'
    return function() {
        console.log(msg);
    }
}
const fn = makeFn()
fn()

闭包是将函数作为返回值,同时返回的外部函数对内部函数有引用

这时将函数赋值给其他变量可以直接访问函数外部的成员,这个调用方式称之为闭包.

闭包的好处:延长了外部函数变量的作用范围

闭包的本质:函数在执行的时候会放到一个执行栈上,当函数执行完毕之后会从执行栈上移除,但是堆上的作用域成员因为外部引用不能释放,因此内部函数依然可以访问外部函数的成员

Part 02 闭包的使用案例

  // 多次调用，计算二次方或三次方
    // Math.pow(4,2)
    // Math.pow(5,2)

    function makePower(power){
      return function(number){
        return Math.pow(number,power)
      }
    }
    // 求平方
    const num2 = makePower(2)
    // 求立方
    const num3 = makePower(3)

    // 通过这种方式封装方法，则不需要每次都传入具体的平方数
    // 通过调用返回的函数体,直接使用,精简了许多
   console.log(num2(10));
   console.log(num3(10));

拓展：练习高阶函数，手写实现reduce累加器

  Array.prototype.fakeReduce = function (fn, init) {
        var arr = this;
       var total = init || arr[0];
        for (var i = init ? 0 : 1; i < arr.length; i++) {
          total = fn(total, arr[i], i, arr);
          console.log(total);
        }
        return total;
      };
      const data = arr.fakeReduce((total, item) => total + item, 5);
      console.log(data);