浅谈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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 Javascript
利用 JavaScript 构建命令行应用
Nov 17 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图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
javascript 文档的编码问题解决
2009/03/01 Javascript
javascript 一些用法小结
2009/09/11 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
Python中join和split用法实例
2015/04/14 Python
python对url格式解析的方法
2015/05/13 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
基于python代码批量处理图片resize
2020/06/04 Python
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
学校门卫管理制度
2014/01/30 职场文书
中学家长会邀请函
2014/02/03 职场文书
双创工作实施方案
2014/03/26 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
质量主管工作职责
2014/09/26 职场文书
入党函调证明材料
2014/12/24 职场文书
税务会计岗位职责
2015/04/02 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
老人院义工活动感想
2015/08/07 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫