乐趣区

关于javascript:闭包的使用场景使用闭包需要注意什么

jiezi

闭包

什么是闭包

闭包很简略，就是可能拜访另一个函数作用域变量的函数，更简略的说，闭包就是函数，只不过是申明在其它函数外部而已。

例如：

function getOuter(){
  var count = 0
  function getCount(num){
    count += num
    console.log(count) // 拜访内部的 date
  }
  return getCount // 内部函数返回
}
var myfunc = getOuter()
myfunc(1) // 1
myfunc(2) // 3

myfunc 就是闭包，myfunc 是执行 getOuter 时创立的 getCount 函数实例的援用。getCount 函数实例保护了一个对它的词法环境的援用，所以闭包就是函数 + 词法环境

当 myfunc 函数被调用时，变量 count 仍然是可用的，也能够更新的

function add(x){return function(y){return x + y};
}

var addFun1 = add(4)
var addFun2 = add(9)

console.log(addFun1(2)) //6
console.log(addFun2(2))  //11

add 承受一个参数 x，返回一个函数, 它的参数是 y，返回 x+y

add 是一个函数工厂，传入一个参数，就能够创立一个参数和其余参数求值的函数。

addFun1 和 addFun2 都是闭包。他们应用雷同的函数定义，但词法环境不同，addFun1 中 x 是 4，后者是 5

即：

  • 闭包能够拜访以后函数以外的变量
  • 即便内部函数曾经返回，闭包仍能拜访内部函数定义的变量与参数
  • 闭包能够更新内部变量的值

所以，闭包能够：

  • 防止全局变量的净化
  • 可能读取函数外部的变量
  • 能够在内存中保护一个变量

应用闭包应该留神什么

  • 代码难以保护： 闭包外部是能够拜访下级作用域，扭转下级作用域的公有变量，咱们应用的应用肯定要小心，不要轻易扭转下级作用域公有变量的值
  • 应用闭包的留神点： 因为闭包会使得函数中的变量都保留在内存中，内存耗费很大，所以不能滥用闭包，否则会造成网页的性能问题，在 IE 中可能导致内存透露。解决办法是，在退出函数之前，将不应用的局部变量全副删除（援用设置为 null，这样就解除了对这个变量的援用，其援用计数也会缩小，从而确保其内存能够在适当的机会回收）
  • 内存透露： 程序的运行须要内存。对于继续运行的服务过程，必须及时开释不再用到的内存，否则占用越来越高，轻则影响零碎性能，重则导致过程解体。不再用到的内存，没有及时开释，就叫做内存透露
  • this 指向： 闭包的 this 指向的是 window

利用场景

闭包通常用来创立外部变量，使得这些变量不能被内部随便批改，同时又能够通过指定的函数接口来操作。例如 setTimeout 传参、回调、IIFE、函数防抖、节流、柯里化、模块化等等

setTimeout 传参

// 原生的 setTimeout 传递的第一个函数不能带参数
setTimeout(function(param){alert(param)
},1000)


// 通过闭包能够实现传参成果
function myfunc(param){return function(){alert(param)
    }
}
var f1 = myfunc(1);
setTimeout(f1,1000);

回调

大部分咱们所写的 JavaScript 代码都是基于事件的 — 定义某种行为，而后将其增加到用户触发的事件之上（比方点击或者按键）。咱们的代码通常作为回调：为响应事件而执行的函数。

例如，咱们想在页面上增加一些能够调整字号的按钮。能够采纳 css，也能够应用：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
    <link rel="stylesheet" href="">
</head>
<style>
    body{font-size: 12px;}
    h1{font-size: 1.5rem;}
    h2{font-size: 1.2rem;}
</style>
<body>
  
    <p> 测试 </p>

    <a href="#" id="size-12">12</a>
    <a href="#" id="size-14">14</a>
    <a href="#" id="size-16">16</a>

<script>
    function changeSize(size){return function(){document.body.style.fontSize = size + 'px';};
    }

    var size12 = changeSize(12);
    var size14 = changeSize(14);
    var size16 = changeSize(16);

    document.getElementById('size-12').onclick = size12;
    document.getElementById('size-14').onclick = size14;
    document.getElementById('size-16').onclick = size16;
</script>
</body>
</html>

IIFE

  var arr = [];
    for (var i=0;i<3;i++){
      // 应用 IIFE
      (function (i) {arr[i] = function () {return i;};
      })(i);
    }
    console.log(arr[0]()) // 0
    console.log(arr[1]()) // 1
    console.log(arr[2]()) // 2

函数防抖、节流

debounce 与 throttle 是开发中罕用的高阶函数，作用都是为了避免函数被高频调用，换句话说就是，用来管制某个函数在肯定工夫内执行多少次。

应用场景

比方绑定响应鼠标挪动、窗口大小调整、滚屏等事件时，绑定的函数触发的频率会很频繁。若稍处理函数微简单，须要较多的运算执行工夫和资源，往往会呈现提早，甚至导致假死或者卡顿感。为了优化性能，这时就很有必要应用 debounce 或 throttle了。

debounce 与 throttle 区别

防抖（debounce）：屡次触发，只在最初 一次触发 时，执行指标函数。

节流（throttle）：限度指标函数调用的 频率，比方：1s 内不能调用 2 次。

源码实现

debounce

// 这个是用来获取以后工夫戳的
function now() {return +new Date()
}
/**
 * 防抖函数，返回函数间断调用时，闲暇工夫必须大于或等于 wait，func 才会执行
 *
 * @param  {function} func        回调函数
 * @param  {number}   wait        示意工夫窗口的距离
 * @param  {boolean}  immediate   设置为 ture 时，是否立刻调用函数
 * @return {function}             返回客户调用函数
 */
function debounce (func, wait = 50, immediate = true) {
  let timer, context, args

  // 提早执行函数
  const later = () => setTimeout(() => {
    // 提早函数执行结束，清空缓存的定时器序号
    timer = null
    // 提早执行的状况下，函数会在提早函数中执行
    // 应用到之前缓存的参数和上下文
    if (!immediate) {func.apply(context, args)
      context = args = null
    }
  }, wait)

  // 这里返回的函数是每次理论调用的函数
  return function(...params) {
    // 如果没有创立提早执行函数（later），就创立一个
    if (!timer) {timer = later()
      // 如果是立刻执行，调用函数
      // 否则缓存参数和调用上下文
      if (immediate) {func.apply(this, params)
      } else {
        context = this
        args = params
      }
    // 如果已有提早执行函数（later），调用的时候革除原来的并从新设定一个
    // 这样做提早函数会从新计时
    } else {clearTimeout(timer)
      timer = later()}
  }
}

throttle

/**
 * underscore 节流函数，返回函数间断调用时，func 执行频率限定为 次 / wait
 *
 * @param  {function}   func      回调函数
 * @param  {number}     wait      示意工夫窗口的距离
 * @param  {object}     options   如果想疏忽开始函数的的调用，传入{leading: false}。*                                如果想疏忽结尾函数的调用，传入{trailing: false}
 *                                两者不能共存，否则函数不能执行
 * @return {function}             返回客户调用函数
 */
_.throttle = function(func, wait, options) {
    var context, args, result;
    var timeout = null;
    // 之前的工夫戳
    var previous = 0;
    // 如果 options 没传则设为空对象
    if (!options) options = {};
    // 定时器回调函数
    var later = function() {
      // 如果设置了 leading，就将 previous 设为 0
      // 用于上面函数的第一个 if 判断
      previous = options.leading === false ? 0 : _.now();
      // 置空一是为了避免内存透露，二是为了上面的定时器判断
      timeout = null;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    };
    return function() {
      // 取得以后工夫戳
      var now = _.now();
      // 首次进入前者必定为 true
      // 如果须要第一次不执行函数
      // 就将上次工夫戳设为以后的
      // 这样在接下来计算 remaining 的值时会大于 0
      if (!previous && options.leading === false) previous = now;
      // 计算剩余时间
      var remaining = wait - (now - previous);
      context = this;
      args = arguments;
      // 如果以后调用曾经大于上次调用工夫 + wait
      // 或者用户手动调了工夫
      // 如果设置了 trailing，只会进入这个条件
      // 如果没有设置 leading，那么第一次会进入这个条件
      // 还有一点，你可能会感觉开启了定时器那么应该不会进入这个 if 条件了
      // 其实还是会进入的，因为定时器的延时
      // 并不是精确的工夫，很可能你设置了 2 秒
      // 然而他须要 2.2 秒才触发，这时候就会进入这个条件
      if (remaining <= 0 || remaining > wait) {
        // 如果存在定时器就清理掉否则会调用二次回调
        if (timeout) {clearTimeout(timeout);
          timeout = null;
        }
        previous = now;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      } else if (!timeout && options.trailing !== false) {
        // 判断是否设置了定时器和 trailing
        // 没有的话就开启一个定时器
        // 并且不能不能同时设置 leading 和 trailing
        timeout = setTimeout(later, remaining);
      }
      return result;
    };
  };

柯里化

在计算机科学中，柯里化（Currying）是把承受多个参数的函数变换成承受一个繁多参数 (最后函数的第一个参数) 的函数，并且返回承受余下的参数且返回后果的新函数的技术。这个技术由 Christopher Strachey 以逻辑学家 Haskell Curry 命名的，只管它是 Moses Schnfinkel 和 Gottlob Frege 创造的。

var add = function(x) {return function(y) {return x + y;};
};
var increment = add(1);
var addTen = add(10);
increment(2);
// 3
addTen(2);
// 12
add(1)(2);
// 3

这里定义了一个 add 函数，它承受一个参数并返回一个新的函数。调用 add 之后，返回的函数就通过闭包的形式记住了 add 的第一个参数。所以说 bind 自身也是闭包的一种应用场景。

柯里化 是将 f(a,b,c) 能够被以 f(a)(b)(c) 的模式被调用的转化。JavaScript 实现版本通常保留函数被失常调用和在参数数量不够的状况下返回偏函数这两个个性。

模块化

模块化的目标在于 将一个程序依照其性能做拆分，分成互相独立的模块，以便于每个模块只蕴含与其性能相干的内容，模块之间通过接口调用。

模块化开发和闭包非亲非故，通过模块模式须要具备两个必要条件能够看出：

  • 内部必须是一个函数, 且函数必须至多被调用一次(每次调用产生的闭包作为新的模块实例)
  • 内部函数外部至多有一个外部函数, 外部函数用于批改和拜访各种外部公有成员
function myModule (){
    const moduleName = '我的自定义模块'
    var name = 'sisterAn'

    // 在模块内定义方法(API)
    function getName(){console.log(name)
    }
    function modifyName(newName){name = newName}

    // 模块裸露:  向外裸露 API
    return {
        getName,
        modifyName
    }
}

// 测试
const md = myModule()
md.getName()    // 'sisterAn'
md.modifyName('PZ')
md.getName()    // 'PZ'

// 模块实例之间互不影响
const md2 = myModule()
md2.sayHello = function () {console.log('hello')
}
console.log(md) // {getName: ƒ, modifyName: ƒ}

常见谬误

在循环中创立闭包

var data = []

for (var i = 0; i < 3; i++) {data[i] = function () {console.log(i)
  }
}

data[0]()   // 3
data[1]()   // 3
data[2]()   // 3

这里的 i 是全局下的 i，共用一个作用域，当函数被执行的时候这时的 i=3，导致输入的构造都是 3

计划一：闭包

var data = []

function myfunc(num) {return function(){console.log(num)
  }
}

for (var i = 0; i < 3; i++) {data[i] = myfunc(i)
}

data[0]()   // 0
data[1]()   // 1
data[2]()   // 2

计划二：let

如果不想应用过多的闭包，你能够用 ES6 引入的 let 关键词：

var data = []

for (let i = 0; i < 3; i++) {data[i] = function () {console.log(i)
  }
}

data[0]()   // 0
data[1]()   // 1
data[2]()   // 2

计划三：forEach

如果是数组的遍历操作（如下例中的 arr），还有一个可选计划是应用 forEach()来遍历：

var data = []

var arr = [0, 1, 2]
arr.forEach(function (i) {data[i] = function () {console.log(i)
  }
})

data[0]()   // 0
data[1]()   // 1
data[2]()   // 2

最初

本文首发自「三分钟学前端」，每天三分钟，进阶一个前端小 tip

面试题库
算法题库

退出移动版