闭包是一种稍微高级且经常被误解的JavaScript语言特性.简而言之,闭包是包含函数的对象,以及对创建函数的环境的引用.但是,为了完全理解闭包,必须首先理解JavaScript语言的另外两个特性 - 第一类函数和内部函数.

一流的功能

在编程语言中,如果函数可以像任何其他数据类型一样被操作,则它们被认为是一等公民.例如,可以在运行时构造第一类函数并将其分配给变量.它们也可以传递给其他函数并由其返回.除了满足前面提到的标准外,JavaScript函数还有自己的属性和方法.以下示例显示了一流函数的一些功能.在该示例中,创建了两个函数并将其分配给变量"foo"和"bar".存储在"foo"中的函数显示一个对话框,而"bar"只返回传递给它的任何参数.该示例的最后一行做了几件事.首先,以"foo"作为参数调用存储在"bar"中的函数."bar"然后返回"foo"函数引用.最后,调用返回的"foo"引用,导致显示"Hello World!".

var foo = function() {
  alert("Hello World!");
};

var bar = function(arg) {
  return arg;
};

bar(foo)();

内在功能

内部函数(也称为嵌套函数)是在另一个函数内部定义的函数(称为外部函数).每次调用外部函数时,都会创建内部函数的实例.以下示例显示了如何使用内部函数.在这种情况下,add()是外部函数.在add()内部,定义并调用doAdd()内部函数.

function add(value1, value2) {
  function doAdd(operand1, operand2) {
    return operand1 + operand2;
  }

  return doAdd(value1, value2);
}

var foo = add(1, 2);
// foo equals 3

内部函数的一个重要特征是它们具有对外部函数范围的隐式访问.这意味着内部函数可以使用外部函数的变量,参数等.在前面的示例中,add()的" value1 "和" value2 "参数作为" operand1 "和"operand2"参数传递给doAdd().但是,这是不必要的,因为doAdd()可以直接访问" value1 "和" value2 ".上面的示例已在下面重写,以显示doAdd()如何使用" value1 "和" value2 ".

function add(value1, value2) {
  function doAdd() {
    return value1 + value2;
  }

  return doAdd();
}

var foo = add(1, 2);
// foo equals 3

创建闭包

当内部函数可以从创建它的函数外部访问时,创建一个闭包.这通常在外部函数返回内部函数时发生.发生这种情况时,内部函数会维护对创建它的环境的引用.这意味着它会记住当时在范围内的所有变量(及其值).以下示例显示了如何创建和使用闭包.

function add(value1) {
  return function doAdd(value2) {
    return value1 + value2;
  };
}

var increment = add(1);
var foo = increment(2);
// foo equals 3

关于这个例子,有很多事情需要注意.

add()函数返回其内部函数doAdd().通过返回对内部函数的引用,创建了一个闭包."value1"是add()的局部变量,是doAdd()的非局部变量.非局部变量指的是既不在本地也不在全局范围内的变量."value2"是doAdd()的局部变量.调用add(1)时,将创建一个闭包并以"increment"存储.在闭包的引用环境中,"value1"绑定到值1.被绑定的变量也被认为是封闭的.这就是名称封闭的来源.调用increment(2)时,输入闭包.这意味着调用doAdd(),其中"value1"变量保持值为1.封闭基本上可以被认为是创建以下功能.

function increment(value2) {
  return 1 + value2;
}

何时使用闭包

闭包可用于完成许多事情.它们对于配置带参数的回调函数非常有用.本节介绍两种情况,即闭包可以使您作为开发人员的生活变得更加简单.

与计时器合作

当与setTimeout()和setInterval()函数一起使用时,闭包非常有用.更具体地说,闭包允许您将参数传递给setTimeout()和setInterval()的回调函数.例如,以下代码通过调用showMessage()每秒打印一次字符串"some message" .

不幸的是,Internet Explorer不支持通过setInterval()传递回调参数.Internet Explorer不显示"某些消息",而是显示"未定义"(因为实际上没有值传递给showMessage()).要解决此问题,可以创建一个闭包,它将"message"参数绑定到所需的值.然后可以将闭包用作setInterval()的回调函数.为了说明这个概念,下面重写了上一个示例中的JavaScript代码以使用闭包.

window.addEventListener("load", function() {
  var showMessage = getClosure("some message
");

  window.setInterval(showMessage, 1000);
});

function getClosure(message) {
  function showMessage() {
    document.getElementById("message").innerHTML += message;
  }

  return showMessage;
}

模拟私人数据

许多面向对象的语言支持私有成员数据的概念.但是,JavaScript不是纯粹的面向对象语言,也不支持私有数据.但是,可以使用闭包来模拟私有数据.回想一下,闭包包含对最初创建它的环境的引用 - 现在它已超出范围.由于引用环境中的变量只能从闭包函数访问,因此它们本质上是私有数据.

以下示例显示了简单Person类的构造函数.创建每个Person时,将通过" name "参数为其指定名称.在内部,Person将其名称存储在" _name "变量中.遵循良好的面向对象编程实践,还提供了getName()方法来检索名称.

function Person(name) {
  this._name = name;

  this.getName = function() {
    return this._name;
  };
}

Person类仍然存在一个主要问题.因为JavaScript不支持私有数据,所以没有什么可以阻止其他人出现并更改名称.例如,以下代码创建名为Colin的Person,然后将其名称更改为Tom.

var person = new Person("Colin");

person._name = "Tom";
// person.getName() now returns "Tom"

就个人而言,如果只有任何人能够合法地改变我的名字,我不会喜欢它.为了阻止这种情况发生,可以使用闭包来使"_name"变量变为私有.使用闭包在下面重写了Person构造函数.请注意,"_ name"现在是Person构造函数的局部变量,而不是对象属性.形成一个闭包是因为外部函数Person()通过创建public getName()方法来公开内部函数.

function Person(name) {
  var _name = name;

  this.getName = function() {
    return _name;
  };
}

现在,当调用getName()时,保证返回最初传递给构造函数的值.某人仍然可以向对象添加新的"_name"属性,但只要它们引用闭包绑定的变量,对象的内部工作就不会受到影响.以下代码显示"_name"变量确实是私有的.

var person = new Person("Colin");

person._name = "Tom";
// person._name is "Tom" but person.getName() returns "Colin"

何时不使用闭包

了解闭包的工作原理以及何时使用它们非常重要.同样重要的是要了解它们何时不适合手头的工作.过度使用闭包会导致脚本执行缓慢并消耗不必要的内存.而且因为闭包很容易创建,所以有可能在不知道它的情况下滥用它们.本节介绍了应谨慎使用闭包的几种情况.

在循环中

在循环内创建闭包可能会产生误导性结果.这方面的一个例子如下所示.在此示例中,创建了三个按钮.单击"button1"时,应显示"单击按钮1"的警报.应为"button2"和"button3"显示类似的消息.但是,运行此代码时,所有按钮都显示"单击按钮4".这是因为,当单击其中一个按钮时,循环已完成执行,并且循环变量已达到其最终值4.

要解决此问题,必须将闭包与实际循环变量分离.这可以通过调用新函数来完成,该函数又创建新的引用环境.以下示例显示了如何完成此操作.循环变量传递给getHandler()函数.getHandler()然后返回一个独立于原始"for"循环的闭包.

function getHandler(i) {
  return function handler() {
    alert("Clicked button " + i);
  };
}
window.addEventListener("load", function() {
  for (var i = 1; i < 4; i++) {
    var button = document.getElementById("button" + i);
    button.addEventListener("click", getHandler(i));
  }
});

在构造函数中不必要的使用

构造函数是关闭滥用的另一个常见原因.我们已经看到了如何使用闭包来模拟私有数据.但是,如果实际上不访问私有数据,那么将方法实现为闭包就太过分了.下面的示例重新访问Person类,但这次添加了一个不使用私有数据的sayHello()方法.

function Person(name) {
  var _name = name;

  this.getName = function() {
    return _name;
  };

  this.sayHello = function() {
    alert("Hello!");
  };
}

每次实例化Person时,都会花费时间创建sayHello()方法.如果创建了许多Person对象,则会浪费时间.更好的方法是将sayHello()添加到Person原型中.通过添加到原型,所有Person对象可以共享相同的方法.这样就不必为每个实例创建一个闭包,从而节省了构造函数的时间.前面的示例在下面重写,外部闭包移入原型.

function Person(name) {
  var _name = name;

  this.getName = function() {
    return _name;
  };
}

Person.prototype.sayHello = function() {
  alert("Hello!");
};

要记住的事情

闭包包含一个函数和对创建函数的环境的引用.

当外部函数暴露内部函数时形成闭包.闭包可用于轻松地将参数传递给回调函数.

可以使用闭包来模拟私有数据.这在面向对象的编程和命名空间设计中很常见.

闭包不应该在构造函数中过度使用.添加到原型是一个更好的主意.

链接

当内部函数以某种方式可用于外部函数之外的任何范围时,将创建闭包.

例:

var outer = function(params){ //Outer function defines a variable called params
    var inner = function(){ // Inner function has access to the params variable of the outer function
        return params;
    }
    return inner; //Return inner function exposing it to outer scope
},
myFunc = outer("myParams");
myFunc(); //Returns "myParams"

考虑到问题是关于解释它就好像是一个6岁的人,我的答案是:

"当你在JavaScript中声明一个函数时,它永远可以访问该函数声明之前的行中可用的所有变量和函数.函数以及它可以访问的所有外部变量和函数就是我们所说的闭包. "

不包含自由变量的函数称为纯函数.

包含一个或多个自由变量的函数称为闭包.

var pure = function pure(x){
  return x 
  // only own environment is used
}

var foo = "bar"

var closure = function closure(){
  return foo
  // foo is free variable from the outer environment
}

^{src:https://leanpub.com/javascriptallongesix/read#leanpub-auto-if-functions-without-free-variables-are-pure-are-closures-impure}

我喜欢Kyle Simpson对闭包的定义:

闭包是指函数能够记住并访问其词法范围,即使该函数在其词法范围之外执行也是如此.

词法范围是指内部范围可以访问其外部范围.

以下是他在"你不了解JS:范围和闭包"系列丛书中提供的修改示例.

function foo() {
  var a = 2;

  function bar() {
    console.log( a );
  }
  return bar;
}

function test() {
  var bz = foo();
  bz();
}

// prints 2. Here function bar referred by var bz is outside 
// its lexical scope but it can still access it
test(); 

MDN解释说我认为最好:

闭包是指独立(自由)变量的函数.换句话说,闭包中定义的函数"记住"创建它的环境.

闭包始终具有外部功能和内部功能.内部函数是所有工作发生的地方,外部函数只是保留内部函数创建范围的环境.通过这种方式,闭包的内部函数"记住"创建它的环境/范围.最经典的例子是计数器功能:

var closure = function() {
  var count = 0;
  return function() {
    count++;
    console.log(count);
  };
};

var counter = closure();

counter() // returns 1
counter() // returns 2
counter() // returns 3

在上面的代码中,count由外部函数(环境函数)保存,这样每次调用时counter(),内部函数(工作函数)都可以递增它.

闭包是当函数以在命名空间中定义的方式关闭时,该函数在调用函数时是不可变的.

在JavaScript中,它发生在您:

在另一个函数中定义一个函数

返回外部函数后调用内部函数

// 'name' is resolved in the namespace created for one invocation of bindMessage
// the processor cannot enter this namespace by the time displayMessage is called
function bindMessage(name, div) {

    function displayMessage() {
        alert('This is ' + name);
    }

    $(div).click(displayMessage);
}

对于一个六岁的孩子......

你知道什么是对象吗？

对象是具有属性和做东西的东西.

关闭闭包最重要的一点是它们允许你用JavaScript创建对象.JavaScript中的对象只是函数和闭包,它允许JavaScript在创建对象后存储对象的属性值.

对象非常有用并且保持一切美观和有条理.不同的对象可以做不同的工作,一起工作对象可以做复杂的事情.

很幸运,JavaScript已经关闭了制作对象,否则一切都会成为一个混乱的噩梦.

这就是一个初学者如何将一个人的头部缠绕在Closures上,就像一个函数被包裹在一个函数体(也称为Closures)中.

Speaking JavaScript一书中的定义"闭包是一个函数加上与函数创建范围的连接" - Dr.Axel Rauschmayer

那看起来怎么样？这是一个例子

function newCounter() {
  var counter = 0;
   return function increment() {
    counter += 1;
   }
}

var counter1 = newCounter();
var counter2 = newCounter();

counter1(); // Number of events: 1
counter1(); // Number of events: 2
counter2(); // Number of events: 1
counter1(); // Number of events: 3

newCounter关闭增量,计数器可以通过增量引用和访问.

counter1和counter2将跟踪自己的价值.

简单但有希望清楚地了解封闭是围绕所有这些伟大和先进的答案.

最好的方法是逐步解释这些概念:

变量

console.log(x);
// undefined

在这里,undefinedJavaScript的方式是"我不知道是什么x意思."

变量就像标签.

你可以说,标记x点值42:

var x = 42;
console.log(x);
// 42

现在JavaScript知道什么x意思.

您还可以重新分配变量.

使标记x指向不同的值:

x = 43;
console.log(x);
// 43

现在x意味着别的东西.

范围

当你创建一个函数时,该函数有自己的变量"框".

function A() {
  var x = 42;
}

console.log(x);

// undefined

从盒子外面,你看不到盒子里面的东西.

但是从盒子里面,你可以看到盒子外面的东西:

var x = 42;

function A() {
  console.log(x);
}

// 42

在内部功能中A,您具有"范围访问权限" x.

现在,如果你有两个并排的盒子:

function A() {
  var x = 42;
}

function B() {
  console.log(x);
}

// undefined

在函数内部B,您无法访问函数内部的变量A.

但是如果你把define函数放在函数B里面A:

function A() {

  var x = 42;

  function B() {
    console.log(x);
  }

}

// 42

您现在拥有"范围访问权限".

功能

在JavaScript中,您通过调用它来运行一个函数:

function A() {
  console.log(42);
}

像这样:

A();

// 42

作为值的功能

在JavaScript中,您可以将标记指向函数,就像指向数字一样:

var a = function() {
  console.log(42);
};

变量a现在意味着一个函数,你可以运行它.

a();
// 42

你也可以传递这个变量:

setTimeout(a, 1000);

在第二个(1000毫秒)中,函数a指向:

// 42

关闭范围

现在,当您定义函数时,这些函数可以访问其外部作用域.

当您将函数作为值传递时,如果访问丢失将会很麻烦.

在JavaScript中,函数保持对外部范围变量的访问.即使他们被传递到其他地方也能运行.

var a = function() {

  var text = 'Hello!'

  var b = function() {
    console.log(text);
    // inside function `b`, you have access to `text`
  };

  // but you want to run `b` later, rather than right away
  setTimeout(b, 1000);

}

现在发生了什么？

// 'Hello!'

或者考虑一下:

var c;

var a = function() {

  var text = 'Hello!'

  var b = function() {
    console.log(text);
    // inside function `b`, you have access to `text`
  };

  c = b;

}

// now we are out side of function `a`
// call `a` so the code inside `a` runs
a(); 

// now `c` has a value that is a function
// because what happened when `a` ran

// when you run `c`
c();

// 'Hello!'

您仍然可以在闭包范围中访问变量.

即使a已经完成运行,现在你正在c外面跑a.

这里发生的事情在JavaScript中称为" 闭包 ".

曾经有一个穴居人

function caveman {

谁有一个非常特别的岩石,

var rock = "diamond";

你自己无法获得岩石,因为它是在穴居人的私人洞穴里.只有穴居人知道如何找到并获得岩石.

return {
    getRock: function() {
        return rock;
    }
};
}

幸运的是,他是一个友好的穴居人,如果你愿意等他回来,他会乐意为你服务.

var friend = caveman();
var rock = friend.getRock();

相当聪明的穴居人.

关闭并不难理解.这仅取决于观点.

我个人喜欢在日常生活中使用它们.

function createCar()
{
    var rawMaterial = [/* lots of object */];
    function transformation(rawMaterials)
    {
       /* lots of changement here */
       return transformedMaterial;
    }
    var transformedMaterial = transformation(rawMaterial);
    function assemblage(transformedMaterial)
    {
        /*Assemblage of parts*/
        return car;
    }
    return assemblage(transformedMaterial);
}

我们只需要在特定情况下执行某些步骤.至于材料的转换只有在你有零件时才有用.

闭包基本上创建了两件事: - 一个函数 - 只有该函数才能访问的私有作用域

这就像在功能周围涂上一些涂层.

所以对于一个6岁的孩子来说,可以用类比来解释.假设我建造了一个机器人.那个机器人可以做很多事情.在这些事情中,我把它编程为计算他在天空中看到的鸟的数量.每次他看到25只鸟,他应该告诉我他从一开始就看到了多少只鸟.

除非他告诉我,我不知道他见过多少只鸟.只有他知道.这是私人范围.这基本上就是机器人的记忆.假设我给了他4 GB.

告诉我他看过多少只鸟是返回的功能.我也创造了那个.

这个比喻有点太糟糕了,但是有人可能会改进它.

关闭一词只是指能够在一个功能(六岁:盒子)中访问已关闭(六岁:私人)的对象(六岁:事物).即使功能(六岁:盒子)超出范围(六岁:发送很远).

我以前读过所有这些,但它们都非常有用.有些人非常接近得到简单的解释然后变得复杂或保持抽象,打败目的并且未能显示非常简单的现实世界用途.

虽然通过所有的例子和解释,你可以很好地了解闭包是什么,而不是通过评论和代码,我仍然不满意一个非常简单的插图,帮助我获得闭包有用而不会变得如此复杂.我的妻子想要学习编码,我想我不仅要在这里展示什么,而且为什么,以及如何展示.

我不确定一个六岁的孩子会得到这个,但我认为这可能会更接近于以现实世界的方式展示一个简单的案例,这个案例可能非常有用并且很容易理解.

其中一个最好的(或最接近最简单的)是莫里斯的"傻瓜闭馆"的复述.

采用"SayHi2Bob"概念只需要进一步展示您可以从阅读所有答案中收集到的两个基本内容:

闭包可以访问包含函数的变量.

闭包持久存在于自己的内存空间中(因此对于所有类型的oop-y实例化内容都很有用)

向我自己证明和展示这一点,我做了一点小提琴:

http://jsfiddle.net/9ZMyr/2/

function sayHello(name) {
  var text = 'Hello ' + name; // Local variable
  console.log(text);
  var sayAlert = function () {
      alert(text);
  }
  return sayAlert;
}

sayHello(); 
/* This will write 'Hello undefined' to the console (in Chrome anyway), 
but will not alert though since it returns a function handle to nothing). 
Since no handle or reference is created, I imagine a good js engine would 
destroy/dispose of the internal sayAlert function once it completes. */

// Create a handle/reference/instance of sayHello() using the name 'Bob'
sayHelloBob = sayHello('Bob');
sayHelloBob();

// Create another handle or reference to sayHello with a different name
sayHelloGerry = sayHello('Gerry');
sayHelloGerry();

/* Now calling them again demonstrates that each handle or reference contains its own 
unique local variable memory space. They remain in memory 'forever' 
(or until your computer/browser explode) */
sayHelloBob();
sayHelloGerry();

这展示了关于闭包的两个基本概念.

用简单的术语来解释为什么这很有用,我有一个基本函数,我可以在其中创建包含在该内存引用中持久存储的唯一数据的引用或句柄.每次我想说出别人的名字时,我都不必重写这个功能.我已经封装了该例程并使其可重用.

对我来说,这至少导致构造函数,oop实践,单例与具有自己数据的实例化实例等的基本概念等.

如果你用这个开始一个新手,那么你可以继续进行更复杂的基于对象属性/成员的调用,并希望这些概念可以随之进行.

我认为退后一步并检查一个更为笼统的"闭合"概念 - 即所谓的"连接算子"是有价值的.

在数学中,"连接"运算符是部分有序集合上的函数,它返回大于或等于其参数的最小对象.在符号中,连接[a,b] = d使得d> = a且d> = b,但是不存在e使得d> e> = a或d> e> = b.

因此,连接为您提供了比部件"更大"的最小的东西.

现在,请注意JavaScript范围是部分有序的结构.因此,有一个合情合理的概念.特别是,范围的连接是比原始范围更大的最小范围.该范围称为闭包.

因此,变量a,b,c的闭包是将a,b和c带入范围的最小范围(在程序范围的格子中!).

我能想到解释JavaScript闭包的最简单的用例是模块模式.在模块模式中,您可以定义一个函数,然后在所谓的立即调用函数表达式(IIFE)中立即调用它.您在该函数中编写的所有内容都具有私有范围,因为它是在闭包内定义的,因此允许您在JavaScript中"模拟"隐私.像这样:

 var Closure = (function () {
    // This is a closure
    // Any methods, variables and properties you define here are "private"
    // and can't be accessed from outside the function.

    //This is a private variable
    var foo = "";

    //This is a private method
    var method = function(){

    }
})();

另一方面,如果您想在闭包外部显示一个或多个变量或方法,则可以将它们返回到对象文字中.像这样:

var Closure = (function () {
  // This is a closure
  // Any methods, variables and properties you define here are "private"
  // and can't be accessed from outside the function.

  //This is a private variable
  var foo = "";

  //This is a private method
  var method = function(){

  }

  //The method will be accessible from outside the closure
  return {
    method: method
  }

})();

Closure.method();

希望能帮助到你.问候,

我对闭包的看法:

可以将闭包与书架上的书籍进行比较.

假设您已经阅读了一本书,并且您喜欢本书中的某些页面.您在该页面上放置了一个书签来跟踪它.

现在,一旦你读完这本书,你就不再需要这本书了,除了你想要访问那个页面.你可能只是剪掉了页面,但是你会松开故事的背景.因此,您将书籍放回书架中,并带有书签.

这与封闭类似.这本书是外部函数,页面是你的内部函数,它从外部函数返回.书签是对页面的引用,故事的上下文是词法范围,您需要保留它.书架是功能堆栈,不能清理旧书,直到你抓住页面.

代码示例:

function book() {
   var pages = [....]; //array of pages in your book
   var bookMarkedPage = 20; //bookmarked page number
   function getPage(){
       return pages[bookMarkedPage];
   }
   return getPage;
}

var myBook = book(),
    myPage = myBook.getPage();

当您运行该book()函数时,您将在堆栈中分配内存以使函数运行.但由于它返回一个函数,因此内部函数无法释放内存函数,因为内部函数可以访问外部上下文中的变量.案例'pages'和'bookMarkedPage'.

因此,有效调用book()返回对闭包的引用,即不仅是函数,而且是对书及其上下文的引用,即对函数getPage,页面状态和bookMarkedPage变量的引用.

有些要考虑的要点:

第1点: 书架,就像功能堆栈的空间有限一样,所以明智地使用它.

要点2: 想一想这样一个事实,即当您只想跟踪单个页面时是否需要保留整本书.您可以通过在返回闭包时不存储书中的所有页面来释放部分内存.

这是我对闭包的看法.希望它有所帮助,如果有人认为这是不正确的,请告诉我,因为我非常有兴趣了解范围和封闭更多!

让我们从这里开始,如在MDN上定义的:闭包是指独立(自由)变量的函数(在本地使用但在封闭范围内定义的变量).换句话说,这些函数"记住"它们的创建环境.

词汇范围
考虑以下内容:

function init() {
  var name = 'Mozilla'; // name is a local variable created by init
  function displayName() { // displayName() is the inner function, a closure
    alert(name); // use variable declared in the parent function    
  }
  displayName();    
}
init();

init()创建一个名为name的局部变量和一个名为displayName()的函数.displayName()函数是一个在init()中定义的内部函数,只能在init()函数体内使用.displayName()函数没有自己的局部变量.但是,因为内部函数可以访问外部函数的变量,所以displayName()可以访问父函数init()中声明的变量名.

function init() {
    var name = "Mozilla"; // name is a local variable created by init
    function displayName() { // displayName() is the inner function, a closure
        alert (name); // displayName() uses variable declared in the parent function    
    }
    displayName();    
}
init();

运行代码并注意displayName()函数中的alert()语句成功显示name变量的值,该值在其父函数中声明.这是词法作用域的一个示例,它描述了解析器在嵌套函数时如何解析变量名称."lexical"一词指的是词法范围使用在源代码中声明变量的位置来确定变量可用的位置.嵌套函数可以访问在其外部作用域中声明的变量.

关闭
现在考虑以下示例:

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

var myFunc = makeFunc();
myFunc();

运行此代码与上面的init()函数的前一个示例具有完全相同的效果:这次,字符串"Mozilla"将显示在JavaScript警告框中.有趣的是 - 在执行之前,displayName()内部函数是从外部函数返回的.

乍一看,这段代码仍然有效,这似乎不直观.在某些编程语言中,函数中的局部变量仅在该函数执行期间存在.一旦makeFunc()完成执行,您可能会期望名称变量不再可访问.但是,因为代码仍然按预期工作,所以在JavaScript中显然不是这种情况.

原因是JavaScript中的函数形成闭包.闭包是函数和声明该函数的词法环境的组合.此环境由创建闭包时在范围内的任何局部变量组成.在这种情况下,myFunc是对运行makeFunc时创建的函数displayName的实例的引用.displayName的实例维护对其词汇环境的引用,其中存在变量名称.因此,当调用myFunc时,变量名仍可供使用,"Mozilla"将传递给alert.

这是一个稍微有趣的例子 - 一个makeAdder函数:

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(x),它接受一个参数x,并返回一个新函数.它返回的函数接受一个参数y,并返回x和y之和.

实质上,makeAdder是一个函数工厂 - 它创建的函数可以为其参数添加特定值.在上面的例子中,我们使用函数工厂创建两个新函数 - 一个为其参数添加5,另一个添加10.

add5和add10都是闭包.它们共享相同的函数体定义,但存储不同的词法环境.在add5的词汇环境中,x是5,而在add10的词汇环境中,x是10.

实用的封闭

闭包很有用,因为它们允许您将一些数据(词法环境)与对该数据进行操作的函数相关联.这与面向对象编程有明显的相似之处,其中对象允许我们将一些数据(对象的属性)与一个或多个方法相关联.

因此,您可以在通常只使用单个方法的对象的任何位置使用闭包.

您可能希望这样做的情况在网络上特别常见.我们在前端JavaScript中编写的大部分代码都是基于事件的 - 我们定义了一些行为,然后将其附加到用户触发的事件(例如点击或按键).我们的代码通常作为回调附加:一个响应事件而执行的函数.

例如,假设我们希望向调整文本大小的页面添加一些按钮.一种方法是指定body元素的font-size(以像素为单位),然后使用相对em单位设置页面上其他元素的大小(如标题):

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.2em;
}

我们的交互式文本大小按钮可以更改body元素的font-size属性,并且由于相对单位,调整将由页面上的其他元素拾取.这是JavaScript:

function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

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

size12,size14和size16现在是分别将正文文本大小调整为12,14和16像素的函数.我们可以将它们附加到按钮(在本例中为链接),如下所示:

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;






function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

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

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

有关闭包的更多信息,请访问MDN上的链接