微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

深入解析JavaScript中的变量作用域_javascript技巧

php中文网
发布： 2016-05-16 17:10:23
原创
1343人浏览过

在学习JavaScript的变量作用域之前，我们应当明确几点：

•JavaScript的变量作用域是基于其特有的作用域链的。

•JavaScript没有块级作用域。

•函数中声明的变量在整个函数中都有定义。

1、JavaScript的作用域链
首先看下下面这段代码：

复制代码 代码如下:



观察alert(rain);这句代码。JavaScript首先在inner函数中查找是否定义了变量rain，如果定义了则使用inner函数中的rain变量；如果inner函数中没有定义rain变量，JavaScript则会继续在rainman函数中查找是否定义了rain变量，在这段代码中rainman函数体内没有定义rain变量，则JavaScript引擎会继续向上（全局对象）查找是否定义了rain；在全局对象中我们定义了rain = 1，因此最终结果会弹出'1'。

作用域链：JavaScript需要查询一个变量x时，首先会查找作用域链的第一个对象，如果以第一个对象没有定义x变量，JavaScript会继续查找有没有定义x变量，如果第二个对象没有定义则会继续查找，以此类推。

上面的代码涉及到了三个作用域链对象，依次是：inner、rainman、window。

2、函数体内部，局部变量的优先级比同名的全局变量高。

PHP5 和 MySQL 圣经
PHP5 和 MySQL 圣经

本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。

PHP5 和 MySQL 圣经 466
查看详情 PHP5 和 MySQL 圣经
复制代码 代码如下:



3、JavaScript没有块级作用域。

这一点也是JavaScript相比其它语言较灵活的部分。

仔细观察下面的代码，你会发现变量i、j、k作用域是相同的，他们在整个rain函数体内都是全局的。

复制代码 代码如下:



4、函数中声明的变量在整个函数中都有定义。

首先观察这段代码：

复制代码 代码如下:



上面得代码说明了，变量x在整个rain函数体内都可以使用，并可以重新赋值。由于这条规则，会产生“匪夷所思”的结果，观察下面的代码。
复制代码 代码如下:



是由于在函数rain内局部变量x在整个函数体内都有定义（ var x= 'rain-man'，进行了声明），所以在整个rain函数体内隐藏了同名的全局变量x。这里之所以会弹出'undefined'是因为，第一个执行alert(x)时，局部变量x仍未被初始化。

所以上面的rain函数等同于下面的函数：

复制代码 代码如下:

function rain(){ var x; alert( x ); x = 'rain-man'; alert( x );}

5、未使用var关键字定义的变量都是全局变量。
复制代码 代码如下:



这也是JavaScript新手常见的错误，无意之中留下的许多全局变量。

6、全局变量都是window对象的属性

复制代码 代码如下:



等同于下面的代码
复制代码 代码如下:


相关标签：
javascript

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：jquery div拖动效果示例代码_jquery 下一篇：jquery 快速回到页首的方法_jquery
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript函数组合_Compose实现方法 函数组合是将多个函数串联，前一个输出作为下一个输入。在JavaScript中，compose函数通过reduceRight实现从右到左执行，如compose(f,g)(x)等价于f(g(x))；支持异步时可用async/await顺序处理；与pipe不同，后者从左到右执行，更直观但非数学定义的组合。掌握compose有助于写出更清晰、可复用的函数式代码。
2025-11-30 15:29:33
529
JavaScript中无数据库实现URL参数短链的策略与实践 本文探讨在JavaScript环境中，不依赖数据库实现URL参数短链的两种主要策略。我们将分析Gzip结合Base64编码的局限性，并重点介绍如何通过设计应用特定的自定义压缩编码方案，高效地将冗长的URL参数转换为简洁的短字符串，同时提供编码与解码的实现思路，适用于需要内存级解决方案的场景。
2025-11-30 15:18:11
870
JavaScript中将JSON对象数组转置为键值数组映射的实用指南 本教程详细介绍了如何在JavaScript中将一个包含多个JSON对象的数组转换为一个键值映射对象，其中每个键对应一个属性名，其值则是一个包含所有原始对象中该属性值的数组。文章将通过一个简洁高效的函数实现这一转置操作，并提供代码示例，帮助开发者理解并掌握这种常见的数据结构转换技巧，从而提升数据处理的灵活性和效率。
2025-11-30 15:17:47
844
优化动态内容注入：解决Body标签导致的累积布局偏移（CLS）问题 当Lighthouse或PageSpeedInsights报告标签是累积布局偏移（CLS）的主要贡献者时，这通常意味着页面中存在大量动态注入的HTML内容导致了布局不稳定。本教程将深入探讨此类问题的根源，并提供一系列实用的策略和技术，帮助开发者有效识别、最小化并优化动态内容注入，从而显著提升页面性能和用户体验。
2025-11-30 15:17:01
967
解决Express.js中PUT请求更改用户密码失败的问题：路由参数的重要性 本文探讨了Express.js应用中，当使用PUT请求更新用户密码时出现500内部服务器错误，而POST请求却能正常工作的常见问题。核心原因在于PUT请求的路由定义缺少了动态参数。教程详细解释了RESTfulAPI中PUT请求的语义，并通过示例代码展示了如何在路由路径中添加如/:id这样的参数来解决此问题，确保Express.js能够正确匹配和处理更新操作，从而实现密码安全有效地修改。
2025-11-30 15:15:33
294
单次操作的条件执行：&& 运算符的优雅实践 本文探讨了在编程中如何优雅地实现单次操作的条件执行，特别是当仅需在特定条件为真时执行某个动作，而条件为假时无需任何操作的场景。针对常见的“单参数三元运算符”疑问，文章详细介绍了如何利用逻辑与（&&）运算符的短路求值特性，提供了一种更为简洁、高效且符合编程习惯的解决方案，并与传统if语句进行对比，指导开发者选择最适合的实践方式。
2025-11-30 15:15:16
978
优化Next.js图片质量：理解与正确使用Next/Image的sizes属性 在使用Next.js的Next/Image组件时，即使设置了width、height和quality，图片仍可能出现质量下降。这通常是由于sizes属性未正确配置，导致Next.js根据不准确的尺寸信息加载了低分辨率的图片。本文将深入探讨sizes属性的作用机制，并提供详细的解决方案，确保图片在不同视口下都能以最佳质量展示。
2025-11-30 15:15:01
1002
React列表渲染中实现单个元素状态独立更新与事件触发 在React应用中，当处理动态列表（如Todo列表）时，常见的挑战是确保用户交互（如点击“完成”按钮）仅影响特定的列表项，而非所有项。本教程将深入探讨如何通过为每个列表项维护独立的布尔状态，并结合React的useState和数组的map方法，实现精确的状态更新和事件触发，从而解决点击事件全局影响的问题，提升组件的交互性和用户体验。
2025-11-30 15:14:01
936
利用window.print()实现网页内容导出PDF的无库方案 本教程探讨了在不使用任何第三方库的情况下，将网页内容导出为PDF的纯前端实现方法。针对直接将HTML作为PDFBlob下载的常见误区，文章详细介绍了如何利用浏览器内置的window.print()功能，通过模拟打印操作，引导用户将指定内容保存为PDF文件，并提供了详细的代码示例和注意事项，确保解决方案的有效性和可操作性。
2025-11-30 15:13:40
398
Angular递归组件实现动态导航菜单：基于配置高效构建复杂UI 本文详细介绍如何在Angular应用中利用递归组件模式，根据动态配置数据生成多级导航菜单。通过定义清晰的数据接口和构建可复用的组件，我们能够高效地渲染任意深度的嵌套菜单，从而提升代码的可维护性和扩展性，并实现基于层级的动态样式和行为控制。
2025-11-30 15:13:13
133
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部