浅谈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 相关文章推荐
屏蔽相应键盘按钮操作
Mar 10 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
js实现简单排列组合的方法
Jan 27 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
Angular学习教程之RouterLink花式跳转
May 03 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 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学习之数组的定义和填充
2011/04/17 PHP
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
Python GAE、Django导出Excel的方法
2008/11/24 Python
python二叉树的实现实例
2013/11/21 Python
wxPython事件驱动实例详解
2014/09/28 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
python实现扫描日志关键字的示例
2018/04/28 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
Python多进程编程常用方法解析
2020/03/26 Python
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
JAVA和C++的区别
2013/10/06 面试题
小学生学雷锋演讲稿
2014/04/25 职场文书
车辆转让协议书
2014/09/24 职场文书
导游词之唐山景点
2019/12/18 职场文书