首页
技术博客
PHP教程
数据库技术
前端开发
HTML5
Nginx
php论坛
新用户注册
|
会员登录
PHP教程
技术博客
编程问答
PNG素材
编程语言
前端技术
Android
PHP教程
HTML5教程
数据库
Linux技术
Nginx技术
PHP安全
WebSerer
职场攻略
JavaScript
开放平台
业界资讯
大话程序猿
登录
极速注册
取消
热门标签 | HotTags
chat
schema
char
io
metadata
jsp
integer
search
select
hashset
frameworks
expression
utf-8
random
rsa
heatmap
substring
copy
datetime
format
flutter
bitmap
scala
ascii
merge
vbscript
web3
regex
bit
javascript
node.js
typescript
solr
stream
tags
java
php8
export
netty
dockerfile
instance
email
heap
actionscrip
timezone
js
window
triggers
blob
express
cPlusPlus
subset
version
bytecode
post
match
yaml
string
python3
iostream
foreach
int
const
dagger
function
hashcode
range
process
get
perl
header
python
php5
ip
future
nodejs
httpclient
dll
hash
当前位置:
开发笔记
>
编程语言
> 正文
深入理解JavaScript的作用域链与闭包
作者:iwasafool | 来源:互联网 | 2024-12-23 01:27
本文详细探讨了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`值。
总结:
- 闭包是一个函数加上其创建时的作用域环境。
- 使用闭包可以保持对创建时状态的记忆。
- 闭包使得函数可以在其词法作用域之外访问其内部变量。
- 合理使用闭包可以避免常见的陷阱,如循环中的闭包问题。
android
asp.net
php
jsp
数据库
java
ip
windows
html
写下你的评论吧 !
吐个槽吧,看都看了
会员登录
|
用户注册
推荐阅读
jsp
深入理解Cookie与Session会话管理
本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ...
[详细]
蜡笔小新 2024-12-27 18:20:43
select
深入理解 Oracle 存储函数:计算员工年收入
本文介绍如何使用 Oracle 存储函数查询特定员工的年收入。我们将详细解释存储函数的创建过程,并提供完整的代码示例。 ...
[详细]
蜡笔小新 2024-12-28 09:49:42
copy
Linux 自动化安装脚本详解
本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ...
[详细]
蜡笔小新 2024-12-27 16:33:32
jsp
次小生成树问题的高效求解
本文探讨了如何通过最小生成树(MST)来计算严格次小生成树。在处理过程中,需特别注意所有边权重相等的情况,以避免错误。我们首先构建最小生成树,然后枚举每条非树边,检查其是否能形成更优的次小生成树。 ...
[详细]
蜡笔小新 2024-12-28 13:42:43
jsp
QUIC协议:快速UDP互联网连接
QUIC(Quick UDP Internet Connections)是谷歌开发的一种旨在提高网络性能和安全性的传输层协议。它基于UDP,并结合了TLS级别的安全性,提供了更高效、更可靠的互联网通信方式。 ...
[详细]
蜡笔小新 2024-12-28 12:33:18
bit
深入解析Android自定义View面试题
本文探讨了Android Launcher开发中自定义View的重要性,并通过一道经典的面试题,帮助开发者更好地理解自定义View的实现细节。文章不仅涵盖了基础知识,还提供了实际操作建议。 ...
[详细]
蜡笔小新 2024-12-28 11:15:04
bit
优化ListView性能
本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ...
[详细]
蜡笔小新 2024-12-28 10:36:30
format
编写有趣的VBScript恶作剧脚本
本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ...
[详细]
蜡笔小新 2024-12-28 09:46:23
utf-8
导航栏样式练习:项目实例解析
本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ...
[详细]
蜡笔小新 2024-12-27 19:42:28
utf-8
分页插件3指定到某一页
前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ...
[详细]
蜡笔小新 2024-12-27 15:19:01
io
Android 渐变圆环加载控件实现
本文介绍了如何在 Android 中创建一个自定义的渐变圆环加载控件,该控件已在多个知名应用中使用。我们将详细探讨其工作原理和实现方法。 ...
[详细]
蜡笔小新 2024-12-27 13:34:19
jsp
国内BI工具迎战国际巨头Tableau,稳步崛起
尽管商业智能(BI)工具在中国的普及程度尚不及国际市场,但近年来,随着本土企业的持续创新和市场推广,国内主流BI工具正逐渐崭露头角。面对国际品牌如Tableau的强大竞争,国内BI工具通过不断优化产品和技术,赢得了越来越多用户的认可。 ...
[详细]
蜡笔小新 2024-12-28 11:12:44
jsp
四载相伴,与51CTO学院共成长
在计算机技术的学习道路上,51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域,51CTO学院始终是我信赖的学习平台。 ...
[详细]
蜡笔小新 2024-12-28 08:20:07
select
新浪笔试题
1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ...
[详细]
蜡笔小新 2024-12-27 19:32:17
jsp
如何在WPS Office for Mac中调整Word文档的文字排列方向
本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤,用户可以轻松更改文本的水平或垂直排列方式,以满足不同的排版需求。 ...
[详细]
蜡笔小新 2024-12-27 12:34:14
iwasafool
这个家伙很懒,什么也没留下!
Tags | 热门标签
chat
schema
char
io
metadata
jsp
integer
search
select
hashset
frameworks
expression
utf-8
random
rsa
heatmap
substring
copy
datetime
format
flutter
bitmap
scala
ascii
merge
vbscript
web3
regex
bit
javascript
RankList | 热门文章
1
图像分类训练方案优化设计
2
FreeTextBoxFCKeditor文本编辑组件官方下载链接
3
提升Android开发效率:Clean Code的最佳实践与应用
4
Java编程中抽象类测试文件详解:AbstractClassTest.java分析
5
在 PyCharm 中高效安装和导入第三方库(如 NumPy、Pip 和 Matplotlib)的方法与技巧
6
区块链网络中的“矿工”如何运作
7
史丰收快速计算方法在蓝桥杯竞赛中的应用与解析
8
鲸探加码春节数字藏品市场 | 1 月 15 日新品预告
9
PHP 获取高精度时间戳:毫秒级时间戳的实现方法与示例代码
10
Hibernate(第四部分):深入探讨缓存机制与懒加载策略
11
Ceph Placement Group 数量计算方法与最佳实践
12
SAP 实用技巧:如何高效终止运行中的进程
13
如何解决透视表中日期组合功能失效的问题?
14
Java实现带头结点的单链表查找算法详解
15
寡妇制造者瞬镜机制详解与应用技巧
PHP1.CN | 中国最专业的PHP中文社区 |
DevBox开发工具箱
|
json解析格式化
|
PHP资讯
|
PHP教程
|
数据库技术
|
服务器技术
|
前端开发技术
|
PHP框架
|
开发工具
|
在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved |
京公网安备 11010802041100号
|
京ICP备19059560号-4
| PHP1.CN 第一PHP社区 版权所有