理解JavaScript中的闭包

闭包并不复杂。学习和理解闭包的基础知识仅仅只需要10分钟。

什么是闭包?

闭包是JavaScript的一部分,每个工程师都应该知道和理解闭包。今天的文章只是撇开闭包的表面,但是将会给你一个很好的思想,关于什么是闭包和它在JavaScript中是如何运行的。好了,接下来我们开始吧。

我们先从书本中闭包的定义开始。

定义1

闭包是一个能访问父作用域的函数,即使此作用域关闭了。

定义2

闭包是一个函数和该函数被声明的词汇环境的组合。

很好,但是这些真正的意思是什么?

首先你需要理解在JavaScript中的作用域,作用域实质上是变量在JavaScript中的生命周期。因此,当一个变量定义了一个大的作用域,这个变量会存活多久,那个方法在你的程序中会访问到它。

让我们看一个例子。

当你在JavaScript中创建一个函数,它可以访问创建在这个函数里面和外面的变量。

变量创建在一个函数中也定义了这个变量。一个局部变量只能在这个被定义的函数里面访问到。在下面这个例子中,你将会看到如果我们尝试在这个函数外面打印words,它会输出错误信息。这是因为words是一个内部作用域。

function speak () {
  var words = 'hi';
  console.log(words);
}
speak(); // hi
console.log(words); // undefined

和上一个例子不同,这次我们定义这个words 为全局作用域。
意思是说我们可以在任何函数中访问这个变量。

// 将变量放到函数的外面
// words 现在是个全局变量
var words = 'hi';
function speak(){ 
  console.log(words);
}
speak(); // 'hi' 
console.log(words); // 'hi'

嵌套函数

我们将一个函数放到另一个函数里面会发生什么?我想你跟着操作下面的例子,因为这个会很有趣!

如果你使用谷歌浏览器,打开你的开发工具调试模式:
[Windows]:Ctrl + Shift + J
[MAC]:Cmd + Opt + J

Cool,现在拷贝下面的代码然后粘贴到你的控制台中。我们现在做的是创建一个名字为speak的函数。speak返回一个名称为logIt的函数。最终logIt在控制台中打印log值为words,在这个实例要实现在控制台中输出 ‘hi’

function speak() {
  return function logIt() {
    var words = 'hi';
    console.log(words);
  }
}

当你拷贝到这段代码到你的控制台中,我们将要创建一个变量,然后将speak函数赋值给它。

var sayHello = speak();

现在我们可以看见这个变量sayHello 调用了之后,没有执行内部函数。

sayHello;
//  function logIt() {
//    var words = 'hi';
//    console.log(words);
//  }

如上打印的结果,sayHello 打印的是我们return的内部函数,也就是说,如果我们执行sayHello()在控制台中,它将会唤起执行logIt()函数:

sayHello();
// 'hi'

它奏效了,但是并没有任何特别。让我们移除一行代码看看什么发生了改变。请看下面的示例。我们将清楚定义的变量words移到speak()函数的里面。

function speak() {
  var words = 'hi';
  return function logIt() {
    console.log(words);
  }
}

像之前的操作,让我们定义一个变量并将speak函数赋值给它:

var sayHello = speak();

现在我们看看我们的 sayHello变量会输出什么:

sayHello
//  function logIt() {
//    console.log(words);
//  }

哦,这里没有words 变量的定义,那么发生了什么当我们执行这个函数的时候?

sayHello();
// 'hi'

它仍然起作用了!这是因为你刚刚体验了闭包的影响。

是否有点疑惑?没关系,回想下我们的闭包的定义:

闭包是一个能访问父作用域的函数,即使此作用域关闭了。

在这个例子中我们的speak()函数作用域关闭了。这意味着 var words = 'hi' 应该消失了。然而,在JS中我们有一个名称将这种现象叫做闭包:我们的内部函数保持对其创建的范围的引用。这就允许logIt()函数仍然可以访问words这个变量——即使speak()这个函数作用域关闭了。

function speak() {
  var words = 'hi';
  return function logIt() {
    console.log(words);
  }
}

重要提示,在JavaScript中每个函数都有一个闭包。你不需要你去解释闭包在函数中是怎么运行的,它仅仅只是JavaScript的一部分。

实例2

让我们查看另一个例子。这个例子有点复杂,代码如下:

function name(n) {
  return function(a) {
    return `${n} likes ${a}`;
  };
}

我们定义了一个名字为name 的函数可以传递一个参数,返回一个匿名函数,可以传递一个不同的参数,内部函数返回一个字符串。

我们用name函数创建两个变量。一个我们给name函数传递 John,另一个传 Cindy:

var j = name('John');
var c = name('Cindy');

让我们看看j现在能打印什么:

j;
//  function (a) {
//    return `${n} likes ${a}`;
//  }

所以根据之前示例我们知道这是因为闭包,这个函数应该仍然可以访问n的变量通过父作用域。我们所能做的是把a传递过去,在执行函数的时候。

让我们试试:

j('dogs');  // 'John likes dogs'
c('cats');  // 'Cindy likes cats'

成功了!因为闭包我们才能从之前关闭的作用域引用变量成功的执行我们的函数。

总结

希望你现在可以理解基本的闭包在JavaScript和它是如何运行的!这虽然只是冰山一角,但明白了基础知识才能学习和练习更复杂的闭包。


翻译原文链接:https://codeburst.io/understand-closures-in-javascript-d07852fa51e7
翻译中有疏漏的地方,欢迎指正。

校对:蹦蹦

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,755评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,369评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,799评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,910评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,096评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,159评论 3 411
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,917评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,360评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,673评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,814评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,509评论 4 334
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,156评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,882评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,123评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,641评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,728评论 2 351

推荐阅读更多精彩内容