浅谈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 相关文章推荐
jquery构造器的实现代码小结
May 16 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
javascript中文本框中输入法切换的问题
Dec 10 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
three.js加载obj模型的实例代码
Nov 10 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 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
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
php强制下载类型的实现代码
2011/04/21 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
原生js实现分页效果
2020/09/23 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
urllib2自定义opener详解
2014/02/07 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
会议邀请函范文
2014/01/09 职场文书
社区禁毒工作方案
2014/06/02 职场文书
高中综合实践活动总结
2014/07/07 职场文书
2014最新实习证明模板
2014/10/02 职场文书
优秀党员事迹材料
2014/12/18 职场文书
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python