JavaScript 闭包实践 | Linux 中国

打开网易新闻 查看更多图片

导读：通过深入了解 JavaScript 的高级概念之一：闭包，更好地理解 JavaScript 代码的工作和执行方式。

本文字数：3359，阅读时长大约： 3分钟

https://linux.cn/article-13140-1.html
作者：Nimisha Mukherjee
译者：Xingyu.Wang

在《》中，我提到了一些高级 JavaScript 概念。在本文中，我将深入探讨其中的一个概念：闭包(closure)。

根据 （MDN），“闭包是将一个函数和对其周围的状态（词法环境）的引用捆绑在一起（封闭）的组合。”简而言之，这意味着在一个函数内部的函数可以访问其外部（父）函数的变量。

为了更好地理解闭包，可以看看作用域及其执行上下文。

下面是一个简单的代码片段：

1. var hello = "Hello";

2. function sayHelloWorld() {

3. var world = "World";

4. function wish() {

5. var year = "2021";

6. console.log(hello + " " + world + " "+ year);

7. }

8. wish();

9. }

10. sayHelloWorld();

下面是这段代码的执行上下文：

JS 代码的执行上下文

每次创建函数时（在函数创建阶段）都会创建闭包。每个闭包有三个作用域。

◈ 本地作用域（自己的作用域）

◈ 外部函数范围

◈ 全局范围

我稍微修改一下上面的代码来演示一下闭包：

1. var hello = "Hello";

2. var sayHelloWorld = function() {

3. var world = "World";

4. function wish() {

5. var year = "2021";

6. console.log(hello + " " + world + " "+ year);

7. }

8. return wish;

9. }

10. var callFunc = sayHelloWorld();

11. callFunc();

内部函数wish()在执行之前就从外部函数返回。这是因为 JavaScript 中的函数形成了闭包。

◈ 当sayHelloWorld运行时，callFunc持有对函数wish的引用。

◈wish保持对其周围（词法）环境的引用，其中存在变量world。

私有变量和方法

本身，JavaScript 不支持创建私有变量和方法。闭包的一个常见和实用的用途是模拟私有变量和方法，并允许数据隐私。在闭包范围内定义的方法是有特权的。

这个代码片段捕捉了 JavaScript 中闭包的常用编写和使用方式：

1. var resourceRecord = function(myName, myAddress) {

2. var resourceName = myName;

3. var resourceAddress = myAddress;

4. var accessRight = "HR";

5. return {

6. changeName: function(updateName, privilege) {

7. // only HR can change the name

8. if (privilege === accessRight ) {

9. resourceName = updateName;

10. return true;

11. } else {

12. return false;

13. }

14. },

15. changeAddress: function(newAddress) {

16. // any associate can change the address

17. resourceAddress = newAddress;

18. },

19. showResourceDetail: function() {

20. console.log ("Name:" + resourceName + " ; Address:" + resourceAddress);

21. }

22. }

23. }

24. // Create first record

25. var resourceRecord1 = resourceRecord("Perry","Office");

26. // Create second record

27. var resourceRecord2 = resourceRecord("Emma","Office");

28. // Change the address on the first record

29. resourceRecord1.changeAddress("Home");

30. resourceRecord1.changeName("Perry Berry", "Associate"); // Output is false as only an HR can change the name

31. resourceRecord2.changeName("Emma Freeman", "HR"); // Output is true as HR changes the name

32. resourceRecord1.showResourceDetail(); // Output - Name:Perry ; Address:Home

33. resourceRecord2.showResourceDetail(); // Output - Name:Emma Freeman ; Address:Office

资源记录（resourceRecord1和resourceRecord2）相互独立。每个闭包通过自己的闭包引用不同版本的resourceName和resourceAddress变量。你也可以应用特定的规则来处理私有变量，我添加了一个谁可以修改resourceName的检查。

使用闭包

理解闭包是很重要的，因为它可以更深入地了解变量和函数之间的关系，以及 JavaScript 代码如何工作和执行。

via:

作者： 选题： 译者： 校对：

本文由 原创编译， 荣誉推出

欢迎遵照 CC-BY-NC-SA 协议规定转载，