全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

web前端技巧-关于JavaScript的作用域你应该了解的那点事

发布时间:2021-06-21 09:17:00
发布人:小千

      作用域是JavaScript中非常基础的概念,很多刚入门的同学却弄不懂作用域的概念,但不弄明白的话又不能够写出高效简介的代码,今天小千就来给大家介绍一下关于前端JavaScript作用域的那点事。

<a href=web前端培训" />

      什么是作用域

      JavaScript 中的作用域是指变量的可访问性或可见性,也就是说,程序的哪些部分可以访问该变量,或者该变量在何处可见。

      为什么作用域很重要

      作用域的主要好处是安全性。也就是说,只能从程序的特定区域访问变量,使用作用域,我们可以避免程序其他部分对变量的意外修改。

      作用域可减少命名冲突。也就是说,我们可以在不同的作用域内使用相同的变量名。

      作用域类型

      JavaScript中有三种类型的作用域:全局作用域、局部作用域或函数作用域、块级作用域。

      1. 全局作用域

      不在函数或块(一对花括号)内定义的任何变量都在全局作用域内,可以从程序的任何位置访问全局作用域内的变量。例如:

全局作用域

      2. 局部作用域或函数作用域

      利用 var 在函数体内部声明的变量都在局部作用域(或称函数作用域)内,它们只能从该函数内部访问,不能在外部代码中访问。例如:

局部作用域web前端培训

      3. 块级作用域

      ECMAScript 2015 引入了 let 和 const 来定义变量,与 var 定义变量不同,它们的作用域是在最接近的花括号内,这意味着,不能从那对花括号之外访问它们。例如:

      我们可以看到 var 定义的变量可以在块外部使用,而 let 定义的变量不能在块外部访问。

块级作用域web前端培训

      4.嵌套作用域

      就像 JavaScript 中的函数一样,一个作用域可以嵌套在另一个作用域内。例如:

嵌套作用域web前端培训

      这个代码片段中有 3 个作用域彼此嵌套。首先,块级作用域(由 let 定义的变量创建)嵌套在局部作用域或函数作用域内,而后者又嵌套在全局作用域内。

      5.词法作用域

      词法作用域(也称为静态作用域),从字面上讲是指作用域是在词法分析(通常称为编译)时确定的,而不是在运行时确定的。以题主的问题作为示例:

词法作用域

      在这里,不管是从哪儿调用 test() 函数,console.log(a) 总是会打印 hello world,这与具有 动态作用域 的语言 console.log(a) 不同,后者会根据调用函数的位置而打印不同的值。

      如果上面的代码是用支持动态作用域的语言编写的,console.log(a) 则会打印出来 I belong to func。

      使用词法作用域,我们可以仅通过查看源代码来确定变量的作用域,而在动态作用域下,只有在执行代码后才能确定作用域。

      6.作用域链

      当在 JavaScript 中使用变量时,JavaScript 引擎将尝试在当前作用域中查找变量的值,如果找不到变量,它将查找外部作用域并将继续这样做,直到找到变量或到达全局作用域为止。如果在全局作用域中仍然找不到该变量,它将在全局作用域内隐式声明该变量(非严格模式下)或返回错误。

作用域链web前端培训

      调用 bar() 函数时,JavaScript 引擎将查找 bar 变量并在当前作用域中找到了它。接下来,在当前作用域中查找 foo 变量,但无法找到它,因此继续在外部作用域中查找并找到了它(即全局作用域)。

      之后,我们为 num 变量赋值 99,JavaScript 引擎在当前作用域中查找 num 变量,找不到,然后在外部作用域(全局作用域)中查找变量,也找不到,由于脚本不在严格模式下,因此创建一个名为 num 的新全局变量,并为其分配变量值 99。

      以上就是关于JavaScript作用域的介绍和案例了,如果你对web前端开发感兴趣的话,不妨来千锋web前端培训班了解一下我们的web前端培训课程,现在咨询更有全套免费学习资料可以领取,赶紧赖了解一下吧。

相关文章

安卓APP应用开发相比iOS应用开发有哪些优势?

安卓APP应用开发相比iOS应用开发有哪些优势?

2023-10-14
web网站性能测试的常用指标有哪些?

web网站性能测试的常用指标有哪些?

2023-10-14
Web渗透文件上传有哪些漏洞?

Web渗透文件上传有哪些漏洞?

2023-10-14
Web前端主流框架都有哪些?

Web前端主流框架都有哪些?

2023-10-14

最新文章

常见网络安全面试题:Windows常用的命令有哪些?

常见网络安全面试题:Windows常用的命令有哪些?

2023-10-09
常见网络安全面试题:根据设备告警如何展开排查?

常见网络安全面试题:根据设备告警如何展开排查?

2023-10-09
常见网络安全面试题:mysql加固呢?(数据库加固)

常见网络安全面试题:mysql加固呢?(数据库加固)

2023-10-09
常见网络安全面试题:windows和linux加固?(操作系统加固)

常见网络安全面试题:windows和linux加固?(操作系统加固)

2023-10-09
在线咨询 免费试学 教程领取