文档章节

如何理解JavaScript的闭包

CrisLi
 CrisLi
发布于 2017/08/07 15:52
字数 719
阅读 5
收藏 0

闭包是JavaScript一个重要的感念,但到底什么是闭包,很多人却说不太清楚。关于闭包有两个大家都比较认同的定义:

定义1

A closure is a function that has access to the parent scope, even after the scope has closed.

定义2

A closure is the combination of a function and the lexical environment within which that function was declared.

要想理解闭包,就先要理解Scope(作用域)的概念。作用域就是一个JavaScript变量在何时何地可以被其他函数使用。

当你创建了一个JavaScript函数(function)时,这个函数是可以访问它被创建时内部和外部的变量。举一个栗子:

function sayHi() {
  var who = 'Chris';
  console.log(who);
}
sayHi(); // 'Chris'
console.log(who); // Uncaught ReferenceError: who is not defined

栗子中的 who 就是函数内部变量,即函数内部作用域的变量。变量 who 不能被全局作用域的代码访问,因为它在 sayHi 这个函数的内部作用域内。但如果将代码修改成:

var who = 'Chris';
function sayHi() {
  console.log(who);
}
sayHi(); // 'Chris'
console.log(who); // 'Chris'

who 在全局作用域中,对于 sayHi 来说它是自己的外部作用域中的变量,所以可以被访问到。

再举一个函数嵌套函数的栗子:

function toWho() {
  return function sayHi() {
    var who = 'Chris';
    console.log(who);
  }
}
var greeting = toWho();
greeting(); // 'Chris'

这段代码中,调用 toWho 后返回的是一个函数,在返回的这个函数被调用时,它(sayHi)可以访问自己内部定义的变量(who)。如果我们挪动一行代码,看看会有什么变化。

function toWho() {
  var who = 'Chris';
  return function sayHi() {
    console.log(who);
  }
}
var greeting = toWho();
greeting(); // 'Chris'

可以看到,控制台上会打出 who 这个变量的值(Chris)。当toWho函数被调用后,它的函数体已经执行结束,闭包也已经关闭,返回了一个新函数给变量 greeting 。当 greeting 被调用时,执行的是 sayHi 的函数体。尽管在函数 sayHi 中没有定义 who 变量,但当 greeting 被调用的时候还是可以访问到 sayHi 的父作用域的变量。到此,我们刚刚使用了一个闭包

闭包就是一个函数在它的作用域关闭后,还可以访问它父作用域的变量。

内部函数 sayHi 创建了一个闭包,来维护它父作用域 toWho 函数中的变量。所以当被 greeting 调用时,who 这个变量可以被访问到。

每一个JavaScript函数都会有一个闭包,你不需要做额外的工作来显性的声明闭包。

再来看一个闭包的栗子:

function sayHi(a) {
  return function(b) {
    return `${a} say hi to ${b}`;
  };
}

var x = sayHi('Chris');
var y = sayHi('Kitty');

x('David');  // 'Chris say hi to David'
y('Will');  // 'Kitty say hi to Will'

变量 a 在匿名函数的闭包中,所以当 xy 函数被调用时,a 是可以被访问到的。

© 著作权归作者所有

CrisLi
粉丝 0
博文 3
码字总数 2389
作品 0
私信 提问
通过示例学习Javascript闭包

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

Fundebug
2018/11/21
6
0
10个流行的JavaScript面试题

译者:前端小智 原文:medium.com/@jlanne119/… 为了保证可读性,本文采用意译而非直译 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 1.如何理解 JS 中的关键字? JS 初...

前端小智
06/19
0
0
前端开发JavaScript干货知识点汇总

很多初学的朋友经常问我,前端JavaScript都需要学习哪些东西呀?哪些是JavaScript的重点知识啊? 其实做前端开发工程师,所有的知识点都是我们学习必备的东西,只有扎实的技术基础才是高薪的...

WEB开发阿靖
06/26
0
0
【译】理解JavaScript闭包——新手指南

闭包是JavaScript中一个基本的概念,每个JavaScript开发者都应该知道和理解的。然而,很多新手JavaScript开发者对这个概念还是很困惑的。 正确理解闭包可以帮助你写出更好、更高效、简洁的代...

LINJIAJUN
2018/11/28
0
0
深入理解Javascript闭包

最近在网上查阅了不少Javascript闭包(closure)相关的资料,写的大多是非常的学术和专业。对于初学者来说别说理解闭包了,就连文字叙述都很难看懂。撰写此文的目的就是用最通俗的文字揭开Jav...

周睿
2010/01/19
220
0

没有更多内容

加载失败,请刷新页面

加载更多

PhotoShop 色调:理解直方图/RGB通道信息

一、直方图:图表的形式,展示图像像素分布的情况 1.平均值:表示平均亮度 2.标准偏差值:表示亮度值范围内的中间值 3.像素: 表示用于计算直方图的像素总数 4.色阶:显示指针下面的区域亮度...

东方墨天
23分钟前
5
0
wildfly(JBoss AS)应用服务器快速入门

什么是wildfly JBoss AS 从8版本起名为wildfly。Wildfly是一个开源的基于JavaEE的轻量级应用服务器。可以在任何商业应用中免费使用。 WildFly是一个灵活的、轻量的、强大管理能力的应用程序服...

程序新视界
47分钟前
4
0
Java集合类常见面试知识点总结

Java集合类学习总结 这篇总结是基于之前博客内容的一个整理和回顾。 这里先简单地总结一下,更多详细内容请参考我的专栏:深入浅出Java核心技术 https://blog.csdn.net/column/details/21930...

Java技术江湖
50分钟前
6
0
怎么用for循环打出爱心

先上效果图: 这是用*组成的爱心,下面讲讲思路: 首先这个图形可以拆分成三部分:第一部分是上面三行的两个梯形,第二部分是中间三行的长方形,第三部分是最下面的倒三角形。 其实图形拆分好...

INEVITABLE
56分钟前
4
0
用HttpUrlConnection伪造成HttpClient

https://www.jianshu.com/p/27ad06cc39d2

shzwork
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部