JavaScript闭包,只学这篇就会了

昨天发的文章,排版出现了重大失误。让大家的眼睛受累了。今天再发一遍。 这篇文章使用一些简单的代码例子来解释JavaScript闭包的概念,即使新手也可以轻松参透闭包的含义。其实只要理解了核心概念,闭包并不是那么的难于理解。但是,网上充斥了太多学术性的文章,对于新手来说,看完这些文章可能会更加一头雾水。

这篇文章面向的是使用主流开发语言的程序员,如果你能读懂下面这段代码,恭喜你,你可以开始JavaScript闭包的学习之旅了。

function sayHello(name) {
 var text = 'Hello' + name;
 var say = function() {

 console.log(text);     
      }     
      say(); 
   } 
   sayHello('Joe');
我相信你一定看懂了,那我们就开始吧!

闭包的一个例子

举例之前,我们先用两句话概括一下:

  • 闭包是支持一类函数特性的一种方式(如果你还不知道什么是一类函数,请自行百度);它是一个表达式,这个表达式可以在其作用域(当它被初次定义时)内引用变量,或者被赋值给一个变量,或者被当做一个变量传递给某个函数,甚至被当作一个函数的执行结果被返回出去。
  • 闭包也可以看作是某个函数被调用时分配的栈帧,而且当这个函数返回结果之后它也不会被回收(就好像它被分配给了堆,而不是栈)

下面的例子返回了对一个方法的引用:

function sayHello2(name){    

 var text= 'Hello' + name; //局部变量 
       var say=function(){        
 console.log(text);
       }    
 return say;
    }
    var say2=sayHello2('Bob'); 
    say2();//logs='Hello Bob'

我想大多数JavaScript程序员都能理解上面代码中一个函数的引用是如何被赋值给一个变量(say2)的。如果你不清楚的话,最好在继续了解闭包之前弄清楚。使用C语言的程序员或许会认为这个函数是指向另一个函数的指针,并且变量saysay2也同样是指向函数的指针。

然而C语言中指向函数的指针和JavaScript中对一个函数的引用有很大的不同。在JavaScript中,你可以把引用函数的变量当作同时拥有两个指针:一个指向函数,另一个隐形地指向闭包。

上面的代码中生成了一个闭包是因为匿名函数function(){console.log(text);}被定义在了另外一个函数sayHello2()中。在JavaScript中,如果你在一个函数中定义了另外一个函数,那么你就创建了一个闭包。

在C语言或者其他流行的开发语言当中,函数返回之后,所有局部变量都不能再被访问,因为栈帧已经被销毁了。

在JavaScript中,如果在一个函数中定义了另外一个函数,即使从被调用的函数中返回,局部变量依然能够被访问到。正如上面例子中我们在得到sayHello()的返回值之后又调用了say2()一样。需要注意到,我们调用的代码中引用了函数sayHello2()中的局部变量text

function(){
    console.log(text);
} //say2.toString()的输出结果;

观察say2.toString()的输出结果,我们会发现代码指向变量text。这个匿名函数能够引用值为Hello Bob的变量text是因为sayHello2()的局部变量被保留在了闭包中。

在JavaScript中神奇的地方在于引用一个函数的同时会有一个秘密的引用指向在这个函数内部创建的闭包,类似于委托一个方法指针加一个隐藏的对象引用。

更多例子

当你读到很多关于闭包的文章时,总会感觉一头雾水,但是当你看到一些应用的例子时,你就能清晰的理解闭包是如何工作的了。下面是我推荐的一些例子,希望大家能够认真研究直到真正清楚闭包是如何工作的。如果在你没有完全理解的情况下就开始使用闭包,你很快就会成为很多奇怪bug的创造者。

下面这个例子展示了局部变量不是被复制,而是被保留在了引用当中。这是当外部函数存在的情况下将栈帧保存在内存中的方法之一。

function say667(){
//处于闭包中的局部变量
    var num=42;
    var say=function(){
        console.log(num);
      }
    num++;
    return say;
}
var sayNumber=say667();
sayNumber();//logs 43

下面例子中的三个全局函数有对同一个闭包的共同引用,因为他们都在setupSomeGlobals()中被定义。

var gLogNumber, 
    gIncreaseNumber, 
    gSetNumber;
function setupSomeGlobals() {
  //处于闭包中的局部变量
  var num = 42;
  // 用全局变量存储对函数的引用
  gLogNumber = function() {
      console.log(num);
  }
  gIncreaseNumber = function() {
      num++; 
  }
  gSetNumber = function(x) {
      num = x; 
   }
}
setupSomeGlobals();
gIncreaseNumber();
gLogNumber(); // 43
gSetNumber(5);
gLogNumber(); // 5
var oldLog = gLogNumber;

setupSomeGlobals();
gLogNumber(); // 42oldLog() // 5    

当这三个函数被创建时,它们能够共享对同一个闭包的访问-即对setupSomeGlobals()中的局部变量的访问。

需要注意到在上述例子中,如果你再次调用setupSomeGlobals(),会创建一个新的闭包。gLogNumber()gSetNumber()gLogNumber()会被带有新闭包的函数重写(在JavaScript中,当在一个函数中定义另外一个函数时,重新调用外部函数会导致内部函数被重新创建)。

下面这个例子对很多人来说都难以理解,所以你更需要真正理解它。在循环中定义函数时要格外小心:闭包中的局部变量或许不会和你的预想的一样。

function buildList(list) {    
   var result = [];    
   for (var i = 0; i < list.length; i++) {
     var item = 'item' + i;
     result.push( function() {
       console.log(item + ' ' + list[i])} );
   }
   return result;
}
function testList() {
   var fnlist = buildList([1,2,3]);
   for (var j = 0; j < fnlist.length; j++) {
     fnlist[j]();
   }
} testList() //logs "item2 undefined" 3次

注意到result.push( function() {console.log(item + ' ' + list[i])}result数组中插入了三次对匿名函数的引用。如果你对匿名函数不太熟悉,可以想象成下面的代码:

pointer=function(){
    console.log(item+''+list[i])
};
result.push(pointer);

需要注意到,当你运行上面的例子时,item2 undefined被打印了三次!这是因为像前一个例子中提到的,buildList的局部变量只有一个闭包。当在fnlist[j]()中调用匿名函数时,它们用的都是同一个闭包,而且在这个闭包中使用了iitem的当前值(i的值为3因为循环已经结束,item的值为item2)。因为我们从0开始计数所以item的值为item2,而i++会使i的值变为3

下面这个例子展示了闭包在退出之前包含了外部函数中定义的任何局部变量。注意到变量alice其实是在匿名函数之后定义的。匿名函数先定义,但是当它被调用时它能够访问alice,因为alice和匿名函数处于同一作用域(JavaScript会进行变量提升)。sayAlice()()只是直接调用了sayAlice()返回的函数引用-但结果却和之前一样,只不过没有临时变量而已。

function sayAlice() {
    var say = function() {
        console.log(alice);
     }
    var alice = 'Hello Alice';    
    return say;
}
sayAlice()();// logs "Hello Alice"

注意到变量say也在闭包中,能够被任何在sayAlice()中定义的函数访问,或者在内部函数中被递归调用。

最后一个例子展现了每次调用都为局部变量创建一个独立闭包。不是每个函数定义都会有一个闭包,而是每次函数调用产生一个闭包。

function newClosure(someNum, someRef) {
    var num = someNum;
    var anArray = [1,2,3];
    var ref = someRef;
    return function(x) {
        num += x;
        anArray.push(num);
        console.log('num: ' + num + 
                '; anArray: ' + anArray.toString() +
                '; ref.someVar: ' + ref.someVar + ';');    
    }
}
obj = {someVar: 4};
fn1 = newClosure(4, obj);
fn2 = newClosure(5, obj);
fn1(1); 
// num: 5; anArray: 1,2,3,5; ref.someVar: 4;
fn2(1); 
// num: 6; anArray: 1,2,3,6; ref.someVar: 4;
obj.someVar++;
fn1(2); 
// num: 7; anArray: 1,2,3,5,7; ref.someVar: 5;
fn2(2); 
// num: 8; anArray: 1,2,3,6,8; ref.someVar: 5;

总结

如果你对于闭包的概念依然不清晰,那么最好的方式就是运行一下上面的例子,看看会发生什么。读懂一篇长篇大论要比理解一个例子难的多。我对与闭包和栈帧的解释在技术上并不完全正确-而是为了帮助理解而简化了。如果这些基本点都掌握之后,你就可以朝着更细微之处进发了。

最后总结几点:

  • 当你在一个函数中定义另外一个函数时,你就使用了闭包。
  • 当你在函数中使用eval()时,你就使用了闭包。你在eval中用到的文字可以指向外部函数的局部变量,而且在eval中你也可以使用eval('val foo=...')来创建局部变量。
  • 当你在函数中使用new Function(...)时,不会创建一个闭包(这个新的函数不能引用外部函数的局部变量)。
  • JavaScript中的闭包就好像保存了一份局部变量的备份,他们保持在函数退出时的状态。
  • 最好将闭包当作是一个函数的入口创建的,而局部变量是被添加进这个闭包的。
  • 当一个带有闭包的函数被调用时,总会保存一组新的局部变量。

两个看似代码相同的函数却有不同的行为,是因为隐藏的闭包在作怪。我不认为JavaScript代码能够判断出一个函数引用是否有闭包。

  • 如果你尝试做任何动态代码的改动(例如:myFunction = Function(myFunction.toString().replace(/Hello/,'Hola'));),如果myFunction是个闭包,那就不会起作用(当然,你不会想在运行时里进行源代码的字符串替换,除非...)。
  • 在函数中定义多层函数是有可能的,这样你就可以得到多个级别的闭包。

原文发布于微信公众号 - 司想君(sxjsaylife)

原文发表时间:2017-08-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏积累沉淀

Java设计模式(五)----原型模式

原型模式(Prototype) 一、概述 二、结构 三、浅度克隆和深度克隆  浅度克隆  深度克隆 一、概述  定义:原型模式属...

1969
来自专栏web前端教室

常用技巧之JS判断数组中某元素出现次数

现在前端开发经常需要从api中获取返回的数组, 也许是array,也许是json, 不管是什么,都需要对返回的数据进行再处理, 其中一个重要且经常用到的操作, ...

4668
来自专栏Java与Android技术栈

借助Java 8实现柯里化借助Java 8实现柯里化柯里化的好处总结

在函数式编程中,函数的概念跟数学中函数的概念是一样的,类似于“映射”。高阶函数和柯里化是函数式编程的特性。

1302
来自专栏GreenLeaves

JavaScript之apply()和call()的区别

我 在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示 例,总算是看...

2187
来自专栏诸葛青云的专栏

C语言什么是结构体?初步学习C语言结构体三部曲

结构体部分内容,涉及结构体定义,结构体变量,结构体指针,结构体数组,更多内容敬请关注。

1513
来自专栏PHP实战技术

解构赋值,你不能不懂!

14610
来自专栏keyWords

JavaScript之作用域和闭包

861
来自专栏Python爱好者

Java基础笔记06

1468
来自专栏JetpropelledSnake

Python入门之面向对象编程(一)面向对象概念及优点

本文分为如下几个部分 首先说明面向对象是什么,然后结合实际例子说明面向对象的如下几个优点 方便函数管理 数据封装 对象操作 最后总结一下面向对象的好处 概念...

3777
来自专栏带你撸出一手好代码

深入理解final关键字

通常我们对Java中final关键字的理解是“用final修饰的变量是不可变的”,如果尝试对final变量多次赋值,编译器将报错。似乎final的作用就是保证变...

3425

扫码关注云+社区

领取腾讯云代金券