资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/通过示例学习JavaScript闭包

通过示例学习JavaScript闭包

xingpingz / 726人阅读

摘要：译者按在上一篇博客，我们通过实现一个计数器，了解了如何使用闭包，这篇博客将提供一些代码示例，帮助大家理解闭包。然而，如果通过代码示例去理解闭包，则简单很多。不过，将闭包简单地看做局部变量，理解起来会更加简单。

-

译者按: 在上一篇博客，我们通过实现一个计数器，了解了如何使用闭包(Closure)，这篇博客将提供一些代码示例，帮助大家理解闭包。

原文: JavaScript Closures for Dummies

译者: Fundebug

为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。

闭包并不神奇

其实，只要你领会了闭包的关键概念，一切就非常简单了。作为JavaScript开发者，你应该可以理解以下代码：

Example 1 
function sayHello(name) 
{

  var text = "Hello " + name;

  var sayAlert = function() { console.log(text); }

  sayAlert();
}

sayHello("Bob") // 输出"Hello Bob"

在sayHello()函数中定义并调用了sayAlert()函数；sayAlert()作为内层函数，可以访问外层函数sayHello()中的text变量。理解这一点，你就可以继续阅读这篇博客了。

一个闭包示例

两句话总结闭包(注意，这个定义并不规范，但是有助于理解):

闭包就是函数的局部变量，这些变量在函数return之后仍然可以访问

闭包就是函数的内存堆栈，这个内存堆栈在函数return之后并没有被收回

Example 2 
function sayHello2(name) 
{
  var text = "Hello " + name; // 局部变量

  var sayAlert = function() { console.log(text); }

  return sayAlert;
}

var say2 = sayHello2("Jane");
say2(); // 输出"Hello Jane"

调用sayHello2()函数返回了sayAlert，它是一个引用变量，指向一个函数。相信大多数JavaScript程序员能够理解什么是引用变量，而C程序员则可以把sayAlert以及say2理解为指向函数的指针。

C指针与JavaScript引用变量并无实质区分。在JavaScript中，不妨这样理解，指向函数的引用变量不仅指向函数本身，还隐含地指向了一个闭包。

代码中匿名函数function() { alert(text); }是在另一个函数，即sayHello2()中定义的。在JavaScript中，如果你在函数中定义了一个函数，则创建了闭包。

对于C语言，以及其他绝大多数语言：函数return之后，其局部变量将无法访问，因为内存中的堆栈会被销毁。

对于JavaScript，如果你在函数中定义函数的话，当外层函数return之后，其局部变量仍然可以访问。代码中已经证明了这一点：当sayHello2()函数return之后，我们调用了say2()函数，成功打印了text变量，而text变量正是sayHello2()函数的局部变量。

更多示例

如果只是从定义的角度去理解闭包，显然是非常困难。然而，如果通过代码示例去理解闭包，则简单很多。因此，强烈建议你认真地理解每一个示例，弄清楚它们是如何运行的，这样你会避免很多奇怪的BUG。

Example 3

Example 3中，say667()函数return后，num变量将仍然保留在内存中。并且，sayNumba函数中的num变量并非复制而是引用，因此它输出的是667而非666。

function say667() {

  var num = 666; // say667()函数return后，num变量将仍然保留在内存中

  var sayAlert = function() { console.log(num); }

  num++;

  return sayAlert;

}

var sayNumba = say667();

sayNumba(); // 输出667
Example 4

Example 4中，3个全局函数gAlertNumber，gIncreaseNumber，gSetNumber指向了同一个闭包，因为它们是在同一次setupSomeGlobals()调用中声明的。它们所指向的闭包就是setupSomeGlobals()函数的局部变量，包括了num变量。也就是说，它们操作的是同一个num变量。

function setupSomeGlobals() {

  var num = 666;

  gAlertNumber = function() { console.log(num); }

  gIncreaseNumber = function() { num++; }

  gSetNumber = function(x) { num = x; }

}

setupSomeGlobals();
gAlertNumber(); // 输出666

gIncreaseNumber();
gAlertNumber(); // 输出667

gSetNumber(5);
gAlertNumber(); // 输出5
Example 5

Example 5的代码比较难，不少人都会犯同样的错误，因为它的执行结果很可能违背了你的直觉。

function buildList(list) 
{
  var result = [];

  for (var i = 0; i < list.length; i++) 
  {
    var item = "item" + list[i];
    result.push( function() { console.log(item + " " + list[i])} );
  }

  return result;
}

var fnlist = buildList([1,2,3]);

for (var j = 0; j < fnlist.length; j++) 
{
  fnlist[j](); // 连续输出3个"item3 undefined"
}

result.push( function() {alert(item + " " + list[i])}将指向匿名函数function() {alert(item + " " + list[i])}的引用变量加入了数组，其效果等价于：

pointer = function() {alert(item + " " + list[i])};
result.push(pointer);

代码执行后，连续输出了3个"item3 undefined"，明显与直觉不同。

调用buildList()函数之后，我们得到了一个数组，数组中有3个函数，而这3个函数指向了同一个闭包。而闭包中的item变量值为"item3"，i变量值为3。如果理解了3个函数指向的是同一个闭包，则输出结果就不难理解了。

Example 6

Example 6中，alice变量在sayAlert函数之后定义，这并未影响代码执行。因为返回函数sayAlice2所指向的闭包会包含sayAlice()函数中的所有局部变量，这自然包括了alice变量，因此可以正常打印"Hello Alice"。

function sayAlice() 
{
  var sayAlert = function() { console.log(alice); }

  var alice = "Hello Alice";

  return sayAlert;
}

var sayAlice2 = sayAlice();

sayAlice2(); // 输出"Hello Alice"
Example 7

由Example 7可知，每次调用newClosure()都会创建独立的闭包，它们的局部变量num与ref的值并不相同。

function newClosure(someNum, someRef) 
{
  var anArray = [1,2,3];
  var num = someNum;
  var ref = someRef;

  return function(x) 
  {
      num += x;

      anArray.push(num);

      console.log("num: " + num + "; " + "anArray " + anArray.toString() + "; " + "ref.someVar " + ref.someVar);
    }
}

closure1 = newClosure(40, {someVar: "closure 1"}); 
closure2 = newClosure(1000, {someVar: "closure 2"}); 

closure1(5); // 打印"num: 45; anArray 1,2,3,45; ref.someVar closure 1"
closure2(-10); // 打印"num: 990; anArray 1,2,3,990; ref.someVar closure 2"
总结

严格来讲，我对闭包的解释并不准确。不过，将闭包简单地看做局部变量，理解起来会更加简单。

参考链接

Private Members in JavaScript

Memory Leakage in Internet Explorer

版权声明:
转载时请注明作者Fundebug以及本文地址：
https://blog.fundebug.com/201...

GPU云服务器 云服务器 javascript闭包 javascript闭包详解 javascript示例 机器学习示例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91419.html

相关文章

  • Js学习笔记：闭包

    摘要：一前言这个周末，注意力都在学习基础知识上面，刚好看到了闭包这个神圣的东西，所以打算把这两天学到的总结下来，算是巩固自己所学。因此要注意闭包的使用，否则会导致性能问题。五总结闭包的作用能够读取其他函数内部变量。 # 一、前言 这个周末，注意力都在学习基础Js知识上面，刚好看到了闭包这个神圣的东西，所以打算把这两天学到的总结下来，算是巩固自己所学。也可能有些不正确的地方，也请大家看到了，麻...

    Crazy_Coder 评论0 收藏0

  • [学习笔记] JavaScript 闭包

    摘要：但是，必须强调，闭包是一个运行期概念。通过原型链可以实现继承，而与闭包相关的就是作用域链。常理来说，一个函数执行完毕，其执行环境的作用域链会被销毁。所以此时，的作用域链虽然销毁了，但是其活动对象仍在内存中。 学习Javascript闭包（Closure）javascript的闭包JavaScript 闭包深入理解(closure)理解 Javascript 的闭包JavaScript ...

    sunsmell 评论0 收藏0

  • JavaScript学习笔记(二) 对象与函数

    摘要：在中函数是一等对象，它们不被声明为任何东西的一部分，而所引用的对象称为函数上下文并不是由声明函数的方式决定的，而是由调用函数的方式决定的。更为准确的表述应该为当对象充当函数的调用函数上下文时，函数就充当了对象的方法。 引言：当理解了对象和函数的基本概念，你可能会发现，在JavaScript中有很多原以为理所当然（或盲目接受）的事情开始变得更有意义了。 1.JavaScript...

    jeffrey_up 评论0 收藏0

  • Javascript闭包入门(译文)

    摘要：也许最好的理解是闭包总是在进入某个函数的时候被创建，而局部变量是被加入到这个闭包中。在函数内部的函数的内部声明函数是可以的可以获得不止一个层级的闭包。 前言 总括 ：这篇文章使用有效的javascript代码向程序员们解释了闭包，大牛和功能型程序员请自行忽略。 译者 ：文章写在2006年，可直到翻译的21小时之前作者还在完善这篇文章，在Stackoverflow的How do Java...

    Fourierr 评论0 收藏0

  • 再谈闭包-词法作用域

    摘要：权威指南第六版关于闭包的说明采用词法作用域，也就是说函数的执行依赖于变量的作用域，这个作用域是在函数定义时决定的，而不是函数调用时决定的。闭包这个术语的来源指函数变量可以被隐藏于作用域链之内，因此看起来是函数将变量包裹了起来。 最近打算换工作，所以参加了几次面试(国内比较知名的几家互联网公司)。在面试的过程中每当被问起闭包，我都会说闭包是作用域的问题？令人惊讶的是几乎无一例外的当我提到...

    Ku_Andrew 评论0 收藏0

发表评论

登陆后可评论

0条评论

xingpingz

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<