热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

深入理解JavaScript的作用域链与闭包

本文详细探讨了JavaScript中的作用域链和闭包机制,解释了它们的工作原理及其在实际编程中的应用。通过具体的代码示例,帮助读者更好地理解和掌握这些概念。
### 深入理解Javascript的作用域链与闭包

#### 作用域(Scope)

在Javascript中,变量和函数的可用性受到其作用域的限制。作用域定义了变量和函数的有效范围,增强了程序的局部性和可靠性,减少了命名冲突。

- **全局作用域(Global Scope)**:在代码任何地方都能访问的对象拥有全局作用域。以下几种情况属于全局作用域:
- 最外层函数和最外层函数外部定义的变量。
- 未声明直接赋值的变量会自动成为全局变量。
- 所有`window`对象的属性。

```Javascript
var outSide = "outside";
function outFunction() {
var name = "inside";
function inSideFunction() {
alert(name);
}
inSideFunction();
}
alert(outSide); // 正确
outFunction(); // 正确
```

- **局部作用域(Local Scope)**:在函数内部定义的变量只能在该函数内访问。

```Javascript
function outFunction() {
var name = "inside name";
function inFunction() {
alert(name);
}
inFunction();
}
alert(name); // 错误
```

#### 作用域链(Scope Chain)

作用域链是Javascript引擎用于确定哪些数据可以被函数访问的一种机制。当一个函数创建时,它的作用域链会被初始化为创建此函数时可访问的所有对象。

例如,考虑以下函数:

```Javascript
function add(num1, num2) {
var sum = num1 + num2;
return sum;
}
```

在函数`add`创建时,其作用域链包含了一个全局对象,该对象包含了所有全局变量。

#### 执行上下文(Execution Context)

当函数执行时,Javascript会创建一个执行上下文(Execution Context),其中包含了函数运行所需的所有信息。执行上下文也有自己的作用域链,它从函数的作用域链初始化而来。

```Javascript
var total = add(5, 10);
```

#### 活动对象(Activation Object)

Javascript引擎还会创建一个活动对象(Activation Object),这个对象包含了函数运行期间的所有局部变量、参数以及`this`等变量。活动对象会被推入作用域链的前端,当执行上下文销毁时,活动对象也随之销毁。

#### 闭包(Closure)

闭包是指函数能够记住并访问其词法作用域的能力,即使该函数在其词法作用域之外执行。闭包是在函数创建时形成的,并且保留了对创建时作用域链的引用。

```Javascript
function newLoad() {
for (var i = 1; i <= 3; i++) {
document.getElementById('anchor' + i).Onclick= function () {
alert("you clicked anchor" + i);
};
}
}
```

在这个例子中,点击任何一个链接都会显示“you clicked anchor4”,因为所有的匿名函数都引用了同一个`i`变量,而`i`在循环结束后变成了4。

#### 闭包优化

为了避免上述问题,可以通过立即执行函数表达式(IIFE)来创建新的作用域,从而确保每个匿名函数都能正确引用对应的`i`值。

```Javascript
function newLoad() {
for (var i = 1; i <= 3; i++) {
(function (index) {
document.getElementById('anchor' + index).Onclick= function () {
alert("you clicked anchor" + index);
};
})(i);
}
}
```

通过这种方式,每个匿名函数都有自己独立的作用域,因此能正确地引用到对应的`i`值。

总结:

- 闭包是一个函数加上其创建时的作用域环境。
- 使用闭包可以保持对创建时状态的记忆。
- 闭包使得函数可以在其词法作用域之外访问其内部变量。
- 合理使用闭包可以避免常见的陷阱,如循环中的闭包问题。

推荐阅读
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 深入理解 Oracle 存储函数:计算员工年收入
    本文介绍如何使用 Oracle 存储函数查询特定员工的年收入。我们将详细解释存储函数的创建过程,并提供完整的代码示例。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 本文探讨了如何通过最小生成树(MST)来计算严格次小生成树。在处理过程中,需特别注意所有边权重相等的情况,以避免错误。我们首先构建最小生成树,然后枚举每条非树边,检查其是否能形成更优的次小生成树。 ... [详细]
  • QUIC协议:快速UDP互联网连接
    QUIC(Quick UDP Internet Connections)是谷歌开发的一种旨在提高网络性能和安全性的传输层协议。它基于UDP,并结合了TLS级别的安全性,提供了更高效、更可靠的互联网通信方式。 ... [详细]
  • 深入解析Android自定义View面试题
    本文探讨了Android Launcher开发中自定义View的重要性,并通过一道经典的面试题,帮助开发者更好地理解自定义View的实现细节。文章不仅涵盖了基础知识,还提供了实际操作建议。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • Android 渐变圆环加载控件实现
    本文介绍了如何在 Android 中创建一个自定义的渐变圆环加载控件,该控件已在多个知名应用中使用。我们将详细探讨其工作原理和实现方法。 ... [详细]
  • 国内BI工具迎战国际巨头Tableau,稳步崛起
    尽管商业智能(BI)工具在中国的普及程度尚不及国际市场,但近年来,随着本土企业的持续创新和市场推广,国内主流BI工具正逐渐崭露头角。面对国际品牌如Tableau的强大竞争,国内BI工具通过不断优化产品和技术,赢得了越来越多用户的认可。 ... [详细]
  • 在计算机技术的学习道路上,51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域,51CTO学院始终是我信赖的学习平台。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 如何在WPS Office for Mac中调整Word文档的文字排列方向
    本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤,用户可以轻松更改文本的水平或垂直排列方式,以满足不同的排版需求。 ... [详细]
author-avatar
iwasafool
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有