浅谈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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
Javascript 写的简单进度条控件
Jan 22 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
js几秒以后倒计时跳转示例
Dec 26 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 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(4) php 函数 补充2
2010/02/15 PHP
PHP制作万年历
2015/01/07 PHP
ExtJS下grid的一些属性说明
2009/12/13 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
javascript 动态创建表格
2015/01/08 Javascript
js简单抽奖代码
2015/01/16 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
微信小程序实现倒计时功能
2020/11/19 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python编程之event对象的用法实例分析
2017/03/23 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
学校食堂采购员岗位职责
2013/12/05 职场文书
网页美工求职信
2014/02/15 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
大学生就业策划书范文
2014/04/04 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
个人投资合作协议书
2014/10/12 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
公司员工体检通知
2015/04/21 职场文书
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android