浅谈JavaScript作用域


Posted in Javascript onDecember 06, 2021

一、作用域

通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。

JavaScript(es6前)中的作用域有两种:

  • 全局作用域
  • 局部作用域(函数作用域)
  • 在ES6后,还有一个块级作用域,以后在详述。

1、全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

2、局部作用域

作用于函数内的代码环境,就是局部作用域。 因为跟函数有关系,所以也称为函数作用域。

例如:

for(let i=0;i<100;i++){
       sum += i;
   }

二、变量的作用域

在JavaScript中,根据作用域的不同,变量可以分为两种:

  • 全局变量
  • 局部变量

1、全局变量

在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)。
全局变量在代码的任何位置都可以使用
在全局作用域下 var 声明的变量 是全局变量
特殊情况下,在函数内不使用 var 声明的变量也是全局变量(不建议使用)

2、局部变量

在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量)
局部变量只能在该函数内部使用
在函数内部 var 声明的变量是局部变量
函数的形参实际上就是局部变量

3、全局变量和局部变量的区别

  • 全局变量:在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存。
  • 局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被销毁,因此更节省内存空间。

三、作用域链

根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链

  • 只要是代码,就至少有一个作用域
  • 写在函数内部的局部作用域
  • 如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域

例如:对下面的代码进行分析判断结果是几

function f1() {
    var num = 123;
    function f2() {
        console.log( num );
    }
    f2();
}
var num = 456;
f1();

分析如下图所示:

浅谈JavaScript作用域

可知最终的结果为:123

同样,也可以采取就近原则的方式来查找变量最终的值。

到此这篇关于JavaScript作用域详情介绍的文章就介绍到这了,更多相关JavaScript作用域内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
js时间戳与日期格式之间转换详解
Dec 11 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 Javascript
JavaScript中跨域问题的深入理解
Mar 04 Javascript
JavaScript流程控制(循环)
Dec 06 #Javascript
JavaScript流程控制(分支)
Dec 06 #Javascript
JavaScript实现队列结构过程
Dec 06 #Javascript
JavaScript实现栈结构详细过程
Dec 06 #Javascript
JavaScript实现优先级队列
Dec 06 #Javascript
JavaScript阻止事件冒泡的方法
Dec 06 #Javascript
JavaScript执行机制详细介绍
You might like
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
如何在python中实现随机选择
2019/11/02 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
给老师的道歉信
2014/01/11 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
2014司机年终工作总结
2014/12/05 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle