JavaScript系列——闭包

文章目录

    • 闭包定义
    • 词法作用域
    • 闭包示例
    • 使用场景
      • 创建私有变量
      • ES5 中,解决循环变量的作用域问题
    • 小结

闭包定义

闭包,是函数及其关联的周边环境的引用的组合,在闭包里面,内部函数可以访问外部函数的作用域,而外部函数不能范围内部函数的作用域,从而在内部函数形成一个相对封闭的环境。在JavaScript中,闭包随着函数创建而被创建

词法作用域

词法作用域指的是在源码声明的变量,能够起作用的环境范围,一般是从变量所定义的位置来决定。

看以下代码:

function init() {
  var name = "Mozilla"; // name 是一个被 init 创建的局部变量
  function displayName() {
    // displayName() 是内部函数,一个闭包
    alert(name); // 使用了父函数中声明的变量
  }
  displayName();
}
init();

init() 创建了一个局部变量 name 和一个名为 displayName() 的函数。
displayName() 是定义在 init() 里的内部函数,并且仅在 init() 函数体内可用。
请注意,displayName() 没有自己的局部变量。然而,因为它可以访问到外部函数的变量,所以 displayName() 可以使用父函数 init() 中声明的变量 name 。

在ES6出现以前,声明变量使用 var 关键字,这样声明的变量,其实词法作用域是全局的。在此之前,会遇到很多奇怪的问题,闭包的出现,就是为了解决这些问题。

闭包示例

我们将刚刚的init 方法改造一下

function makeFunc() {
  var name = "Mozilla";
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
myFunc();

运行这段代码的效果和之前 init() 函数的示例完全一样。其中不同的地方(也是有意思的地方)在于内部函数 displayName() 在执行前,从外部函数返回

第一眼看去,执行了makeFunc,name 变量应该会无法再被访问了,然而,执执myFunc 函数是,能够正常弹出Mozilla。

原因在于,在 makeFunc 中的函数中,形成了闭包。闭包是由函数以及声明该函数的词法环境组成。改环境包含了闭包创建时,作用域内的任何布局变量。

在上面的代码中,myFunc 是执行 makeFunc 时创建的 displayName 函数实例的引用
displayName 的实例维持了一个对它的词法环境(变量 name 存在于其中)的引用。
所以,当myFunc 被调用时,变量name 仍然可用。

闭包可以使得引用的变量可以不被垃圾回收机制回收,下面的例子可以加强理解:

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

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2)); // 7
console.log(add10(2)); // 12

makeAdder 执行时,创建了一个闭包,makeAdder(5) 传入x =5,x 被 makeAdder 内部函数引用,因此执行了makeAdder后,x 依然保持在内存中。调用add5(2),返回 x+2 = 5+2= 7。

使用场景

创建私有变量

在 ES6之前,JavaScript不支持声明一个私有变量,使得变量不能在某个作用域外变得不可访问。
虽然JavaScript没有原生支持,但我们可以通过闭包来模拟私有方法和变量。

通过模拟闭包,不仅可以实现变量和方法私有,还可以实现避免同名变量和方法污染全局

看以下代码:

var Counter = (function () {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function () {
      changeBy(1);
    },
    decrement: function () {
      changeBy(-1);
    },
    value: function () {
      return privateCounter;
    },
  };
})();

console.log(Counter.value()); /* logs 0 */
Counter.increment();
Counter.increment();
console.log(Counter.value()); /* logs 2 */
Counter.decrement();
console.log(Counter.value()); /* logs 1 */

在上面代码中,定义一个Counter 变量,他是一个立即执行函数,返回了三个函数。

这三个公共函数是共享同一个环境的闭包。多亏 JavaScript 的词法作用域,它们都可以访问 privateCounter 变量和 changeBy 函数。

如果我们试图访问privateCounter ,都是无法访问的。
如果想要访问privateCounter 的值,必须通过value 方法。要想改变值,只能通过increment或decrement方法,这样就实现了privateCounter 的私有化。

privateCounter 因为被内部函数changeBy引用,而返回的方法中保持了对changeBy引用,因此关于changeBy所引用的变量,将会保持在内存中,因此每一次通过方法改变privateCounter 的值,下一次访问它,就是他最新的值,而不是0。

每次创建的闭包,他们内部都是互相独立的,互不影响的
看下面的代码,分别维护各个作用域:

var makeCounter = function () {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function () {
      changeBy(1);
    },
    decrement: function () {
      changeBy(-1);
    },
    value: function () {
      return privateCounter;
    },
  };
};

var Counter1 = makeCounter();
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 */

两个计数器 Counter1 和 Counter2 维护它们各自的独立性的。每个闭包都是引用自己词法作用域内的变量 privateCounter 。

每次调用其中一个计数器时,通过改变这个变量的值,会改变这个闭包的词法环境。然而在一个闭包内对变量的修改,不会影响到另外一个闭包中的变量。

ES5 中,解决循环变量的作用域问题

在 ES5时候,如果我们想要实现这个一个效果:
当我们把鼠标聚焦在某一个表单中,会有标题提示我们要填写的内容,我们很容易想到下面使用var 循环来实现:

<p id="help">Helpful notes will appear herep>
<p>E-mail: <input type="text" id="email" name="email" />p>
<p>Name: <input type="text" id="name" name="name" />p>
<p>Age: <input type="text" id="age" name="age" />p>
function showHelp(help) {
  document.getElementById("help").innerHTML = help;
}

function setupHelp() {
  var helpText = [
    { id: "email", help: "Your e-mail address" },
    { id: "name", help: "Your full name" },
    { id: "age", help: "Your age (you must be over 16)" },
  ];

  for (var i = 0; i < helpText.length; i++) {
    var item = helpText[i];
    document.getElementById(item.id).onfocus = function () {
      showHelp(item.help);
    };
  }
}

执行上面的代码后效果如下图,无论把鼠标聚焦在哪,标题都是提示最后一个age 的提示,无法达到预期的效果。
原因是 在setupHelp 函数内部,for 循环共享的是同一个 item变量,当onfocus 被触发执行时,i已经变成了2,因此,无论聚焦哪个,最后都是触发第三个item。
JavaScript系列——闭包_第1张图片
解决这个问题的一种方案是使用更多的闭包:特别是使用前面所述的函数工厂:

function showHelp(help) {
  document.getElementById("help").innerHTML = help;
}

function makeHelpCallback(help) {
  return function () {
    showHelp(help);
  };
}

function setupHelp() {
  var helpText = [
    { id: "email", help: "Your e-mail address" },
    { id: "name", help: "Your full name" },
    { id: "age", help: "Your age (you must be over 16)" },
  ];

  for (var i = 0; i < helpText.length; i++) {
    var item = helpText[i];
    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
  }
}

setupHelp();

这份代码中,makeHelpCallback 内部创建了闭包,使得传入makeHelpCallback的item,可以在其内部保持其独立性

通过for 循环,分别创建了三个闭包,每一个闭包都是互相独立的。而且makeHelpCallback外部的item变化,不影响makeHelpCallback内部的值,因为闭包里面词法环境是独立的,不与函数外部的item词法环境共享值,因此即使外部item 变化,也不影响闭包的词法环境所引用的变量值。

小结

  • 闭包是一个函数及其词法环境的引用的组合
  • 闭包内部的词法环境(变量的作用域)是独立的,每次执行函数,都会创建新的闭包,每次创建的闭包都有其独立的词法环境
  • 闭包内部所引用的变量不会随着函数执行而被销毁,而会一直保持在内存中
  • 闭包可以用于模拟私有变量和方法和解决 var循环共享值问题。

你可能感兴趣的:(JavaScript,javascript,开发语言,前端)