浅谈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 相关文章推荐
Javascript 中的 &amp;&amp; 和 || 使用小结
Apr 25 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
JS匿名函数实例分析
Nov 26 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
JS获取本地地址及天气的方法实例小结
May 10 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笔记之:AOP的应用
2013/04/24 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
js post提交调用方法
2014/02/12 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
React Router V4使用指南(精讲)
2018/09/17 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
使用Python的turtle模块画图的方法
2017/11/15 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
初三物理教学反思
2014/01/21 职场文书
争论的故事教学反思
2014/02/06 职场文书
目标管理责任书
2014/04/15 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
Java Socket实现多人聊天系统
2021/07/15 Java/Android
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB