浅谈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 相关文章推荐
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
angular 组件通信的几种实现方式
Jul 13 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 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判断用户是否手机访问代码
2015/06/08 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
javascript json2 使用方法
2010/03/16 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
python实现文本文件合并
2015/12/29 Python
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
大学生在校表现评语
2014/12/31 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
python基于turtle绘制几何图形
2021/06/15 Python
详解Vue slot插槽
2021/11/20 Vue.js
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
Flink 侧流输出源码示例解析
2022/09/23 Servers