浅谈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脚本性能优化注意事项
Nov 18 Javascript
Mootools 1.2教程 事件处理
Sep 15 Javascript
Javascript 面向对象(三)接口代码
May 23 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
微信小程序支付PHP代码
Aug 23 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
tracking.js页面人脸识别插件使用方法
Apr 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学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
javascript常用函数(1)
2015/11/04 Javascript
js实现图片轮播效果
2015/12/19 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
js实现常用排序算法
2016/08/09 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
常见python正则用法的简单实例
2016/06/21 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
C#公司笔试题
2014/03/28 面试题
计算机专业职业生涯规划范文
2014/01/19 职场文书
高一物理教学反思
2014/01/24 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
公司车队管理制度
2015/08/04 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
JavaScript的function函数详细介绍
2021/11/20 Javascript
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS