闭包(前端面试必看)

·  阅读 274

什么是「闭包」: 「函数」和「函数内部能访问到的变量」(也叫环境)的总和,就是一个闭包。

也就是说,闭包可以让你从内部函数访问外部函数作用域。在 JavaScript 中,每当函数被创建,就会在函数生成时生成闭包。

「闭包」的作用是什么: 闭包常常用来「间接访问一个变量」。换句话说,「隐藏一个变量」。

假设我们在做一个游戏,在写其中关于「还剩几条命」的代码。

如果不用闭包,你可以直接用一个全局变量:

window.lives = 30 // 还有三十条命 这样看起来很不妥。万一不小心把这个值改成 -1 了怎么办。所以我们不能让别人「直接访问」这个变量。怎么办呢?

用局部变量。

但是用局部变量别人又访问不到,怎么办呢?

暴露一个访问器(函数),让别人可以「间接访问」。

代码如下:

!function(){

  var lives = 50

  window.奖励一条命 = function(){
    lives += 1
  }

  window.死一条命 = function(){
    lives -= 1
  }

}()
那么在其他的 JS 文件,就可以使用 window.奖励一条命() 来涨命,
使用 window.死一条命() 来让角色掉一条命。

可以避免使用全局变量,防止全局变量污染;

闭包的创建:

  • 闭包就是可以创建一个独立的环境,每个闭包里面的环境都是独立的,互不干扰。

  • 每次外部函数执行的时 候,外部函数的引用地址不同,都会重新创建一个新的地址。

var makeCounter = function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;//这三个公共函数是共享同一个环境的闭包,它们都可以访问 privateCounter 变量和 changeBy 函数。
    }
  }  
};

var Counter1 = makeCounter();//Counter1,Counter2代表了两个独立的环境,他们两的运行互不打扰
var Counter2 = makeCounter();
console.log(Counter1.value()); /* logs 0 */
Counter1.increment();
Counter1.increment();
console.log(Counter1.value()); /* logs 2 */
Counter1.decrement();
console.log(Counter1.value()); /* logs 1 */
console.log(Counter2.value()); /* logs 0 */

参考:developer.mozilla.org/zh-CN/docs/… zhuanlan.zhihu.com/p/22486908

分类:
阅读
标签:
分类:
阅读
标签:
收藏成功!
已添加到「」, 点击更改