浅谈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 相关文章推荐
JScript的条件编译
May 29 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
vue-cli点击实现全屏功能
Mar 07 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代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
试用php中oci8扩展
2015/06/18 PHP
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
vue的for循环使用方法
2019/02/12 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
在Python中编写数据库模块的教程
2015/04/29 Python
使用python实现rsa算法代码
2016/02/17 Python
Python实现翻转数组功能示例
2018/01/12 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
网络管理专业求职信
2014/03/15 职场文书
工程管理英文求职信
2014/03/18 职场文书
本科生就业推荐信
2014/05/19 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
分享几种python 变量合并方法
2022/03/20 Python
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python