浅谈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 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
JavaScript学习笔记之JS事件对象
Jan 22 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
js实现头像上传并且可预览提交
Dec 25 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
星际争霸中的对战模式介绍
2020/03/04 星际争霸
杏林同学录(七)
2006/10/09 PHP
PHP IPV6正则表达式验证代码
2010/02/16 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
python多进程操作实例
2014/11/21 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
Python实现简单http服务器
2018/04/12 Python
python实现textrank关键词提取
2018/06/22 Python
Python递归函数实例讲解
2019/02/27 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
阿巴庭院:Abba Patio
2019/06/18 全球购物
求职推荐信
2013/10/28 职场文书
财务分析个人的自荐书范文
2013/11/24 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
租房协议书范例
2014/10/14 职场文书
求职自我评价参考范文
2019/05/16 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL
利用Python实现Picgo图床工具
2021/11/23 Python
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis