我的编程空间,编程开发者的网络收藏夹
学习永远不晚

JavaScript 闭包实践

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

JavaScript 闭包实践

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

在《JavaScript 如此受欢迎的 4 个原因》中,我提到了一些高级 JavaScript 概念。在本文中,我将深入探讨其中的一个概念:闭包closure

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

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

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

  1. var hello = "Hello";
  2.  
  3. function sayHelloWorld() {
  4. var world = "World";
  5.     function wish() {
  6.         var year = "2021";
  7.         console.log(hello + " " + world + " "+ year);
  8. }
  9. wish();
  10. }
  11. sayHelloWorld();

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

 

JS 代码的执行上下文

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

  • 本地作用域(自己的作用域)
  • 外部函数范围
  • 全局范围

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

  1. var hello = "Hello";
  2.  
  3. var sayHelloWorld = function() {
  4. var world = "World";
  5.     function wish() {
  6.         var year = "2021";
  7.         console.log(hello + " " + world + " "+ year);
  8. }
  9. return wish;
  10. }
  11. var callFunc = sayHelloWorld();
  12. 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 代码如何工作和执行。

 

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

JavaScript 闭包实践

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

JavaScript 闭包实践

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

JavaScript闭包实例代码分析

这篇文章主要介绍了JavaScript闭包实例代码分析的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript闭包实例代码分析文章都会有所收获,下面我们一起来看看吧。什么是闭包?闭包的概念是有很多版本
2023-07-05

JavaScript中的闭包

一.什么是闭包 1.闭包的定义 闭包并不是JS特有的,因此可以从两个角度定义闭包。 1)计算机科学中 闭包又称为词法闭包(在进行词法分析的时候这个闭包就确定了),或者是函数闭包。是在支持头等函数的编程语言中(意思是函数作为一等公民的编程语言
2023-08-18

JavaScript 闭包是如何形成的?(JavaScript闭包怎样形成)

在JavaScript中,闭包是一个比较重要且经常被提及的概念。它是函数和其周围的状态(lexicalenvironment,词法环境)的引用捆绑在一起形成的。闭包的形成主要有以下几个关键步骤:一、函数内部创建函数
JavaScript 闭包是如何形成的?(JavaScript闭包怎样形成)
JavaScript2024-12-17

如何在 JavaScript 中实现闭包传递参数?(JavaScript闭包怎样传递参数)

在JavaScript中,闭包是一个强大的特性,它允许函数访问其外部函数的变量。而传递参数给闭包则是闭包的一个常见用法,它可以让我们在函数外部创建一个函数,并在这个函数内部访问外部函数的变量。下面我们将详细介绍JavaScript闭包怎样传递参数。一、闭
如何在 JavaScript 中实现闭包传递参数?(JavaScript闭包怎样传递参数)
Java2024-12-21

JavaScript 闭包:实现数据封装的巧妙之道(JavaScript闭包如何实现数据封装)

在JavaScript中,闭包是一个强大的特性,它允许函数访问其外部函数的变量,从而实现数据的封装和隐藏。通过闭包,我们可以创建私有变量和函数,并且在外部无法直接访问这些内部的实现细节,从而提高代码的安全性和可维护性。一、闭包的基本概念
JavaScript 闭包:实现数据封装的巧妙之道(JavaScript闭包如何实现数据封装)
Java2024-12-20

javascript闭包有什么用

这篇文章给大家分享的是有关javascript闭包有什么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。用处说明1、可以在函数外读取函数内部的变量,这些变量的值始终保持在内存中。2、闭包会将函数中的变量保存在存储
2023-06-20

重学JavaScript(函数)闭包

JavaScript函数内部可以读取函数外部的变,但反过来,函数的外部通常则无法读取函数内部的变量。在实际应用中,有时需要真正在函数外部访问函数内部的局部变量,此时最常用的方法就是使用闭包。

热门标签

编程热搜

编程资源站

目录