浅谈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 封装Ajax传递的数据代码
Jun 05 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
Nov 15 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
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 在线翻译函数代码
2009/05/07 PHP
php限制文件下载速度的代码
2015/10/20 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
市场营销专业毕业生自荐信
2013/11/02 职场文书
财务人员担保书
2014/05/13 职场文书
党性分析材料格式
2014/12/19 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
家访教师心得体会
2016/01/23 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
创业计划书之面包店
2019/09/17 职场文书