浅谈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 相关文章推荐
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
Javascript中的delete操作符详细介绍
Jun 06 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
详解JS预解析原理
Jun 16 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 stream_context_create()作用和用法分析
2011/03/29 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
用Python遍历C盘dll文件的方法
2015/05/06 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
python MD5加密的示例
2020/10/19 Python
python爬取招聘要求等信息实例
2020/11/20 Python
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
就业协议书范本
2014/04/11 职场文书
小学评语大全
2014/04/22 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
英语教师求职信范文
2015/03/20 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
原生JS实现飞机大战小游戏
2021/06/09 Javascript
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL