浅谈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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
javascript之ESC(第二类混淆)
May 06 Javascript
javascript URL编码和解码使用说明
Apr 12 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
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
S900/ ETON E1-XM 收音机
2021/03/02 无线电
php上传文件的增强函数
2010/07/21 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
python实现的简单窗口倒计时界面实例
2015/05/05 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
Django model update的多种用法介绍
2020/03/28 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
《都江堰》教学反思
2014/02/07 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
技术总监管理职责范本
2014/03/06 职场文书
文科毕业生自荐书范文
2014/04/17 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
公司授权委托书范文
2014/09/21 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis