一篇文章带你了解JavaScript作用域
BilyLiang · 122浏览 · 发布于2021-05-26 +关注

本文基于JavaScript,介绍了了函数作用域和变量作用域。介绍了变量中全局变量的几种显示的方法,在HTML中的全局变量应该如何去表示。通过案例的讲解,让读者更好的去理解。

在JavaScript中,对象和函数也是变量。在JavaScript中,作用域是你可以访问的变量、对象和函数的集合。

JavaScript 有函数作用域: 这个作用域在函数内变化。

一、本地JavaScript变量

一个变量声明在JavaScript函数内部,成为函数的局部变量。

局部变量有局部作用域: 它们只能在函数中访问。

JS:

  1. //code here can not use carName 

  2.   <script> 

  3.     reFunction(); 

  4.     document.getElementById("demo").innerHTML = 

  5.     "carName的类型是 " + typeof carName; 

  6.  

  7.     function reFunction() { 

  8.         var carName = "Volvo"

  9.     } 

  10. </script> 

由于局部变量只在它们的函数中被识别,所以具有相同名称的变量可以在不同的函数中使用。

当函数启动时创建局部变量,当函数完成时删除。

二、全局JavaScript变量

函数外声明的变量, 成为全局变量。

全局变量具有全局作用域: 网页上的所有脚本和函数都可以访问它。

  1. <script> 

  2.     var carName = "Volvo"; //可以从任何脚本或函数访问全局变量 

  3.     myFunction(); 

  4.  

  5.     function myFunction() { 

  6.         document.getElementById("demo").innerHTML = 

  7.         "I can display " + carName; 

  8.     } 

  9. </script> 

自动全局

如果给未声明的变量赋值, 它会自动成为全局变量。

此代码示例将声明一个全局变量carName,即使赋的值是函数内部。

  1. myFunction(); 

  2.  

  3. // code here can use carName 

  4.  

  5. function myFunction() { 

  6.     carName = "Volvo"

不要创建全局变量,除非你非常需要,在严格模式下 "Strict Mode"自动全局变量将失败。

三、在HTML中的全局变量

在JavaScript中,全局作用域是完整的JavaScript环境。

在HTML中,全局作用域是window对象。所有的全局变量都属于window对象。

  1. <!DOCTYPE html> 

  2. <html lang="en"

  3. <head> 

  4.   <meta charset="UTF-8"

  5.   <title>项目</title> 

  6. </head> 

  7. <body style="background-color: aqua;"

  8.  

  9.   <p> 

  10.   在HTML中,所有的全局变量将成为窗口window变量。 

  11.   </p> 

  12.  

  13.   <p id="demo"></p> 

  14.  

  15.   <script> 

  16.     var carName = "Volvo"

  17.  

  18.     // code here can use window.carName 

  19.     document.getElementById("demo").innerHTML = "I can display " + window.carName; 

  20. </script> 

  21.  

  22. </body> 

  23. </html>  

全局变量(或函数)可以覆盖窗口变量(或函数). 任何函数,包括窗口对象,都可以覆盖全局变量和函数.

四、JavaScript 代码块作用域

表中是var,let和const之间的区别。

用var关键字声明的变量不能具有块作用域,{}可以从块外部访问在块内部声明的变量:

  1.   var num = 50; 

  2.   } 

  3.   // num 能在这里使用 

用let关键字声明的变量可以具有“块作用域”。

{}不能从块外部访问在块内部声明的变量:

  1.   let num = 50; 

  2.   } 

  3.   // num不能在这里使用 

声明变量with const与let]涉及块作用域类似。

  1.   const num = 50; 

  2.   } 

  3.   // num不能在这里使用

常量的值不能通过重新分配而更改,也不能重新声明。

五、总结

本文基于JavaScript,介绍了了函数作用域和变量作用域。介绍了变量中全局变量的几种显示的方法,在HTML中的全局变量应该如何去表示。通过案例的讲解,让读者更好的去理解。

代码很简单, 希望能够帮助你学习。


相关推荐

RN开发环境的npm私库本地debug调试

manongba · 363浏览 · 2019-05-09 17:03:46
你不知道的浏览器渲染原理

追忆似水年华 · 520浏览 · 2019-05-09 22:47:56
基于iview的router常用控制方式

追忆似水年华 · 445浏览 · 2019-06-03 10:39:21
编程小知识之 JavaScript 文件读取

manongba · 396浏览 · 2019-06-10 09:16:16
10个省时间的 PyCharm 技巧 赶快收藏!

· 343浏览 · 2019-06-10 09:32:01
加载中

0评论

评论
我是湖南最靓仔的那条仔,希望来到这里能够交道志同道合的朋友,一起学习,不断进步!!!
分类专栏
小鸟云服务器
扫码进入手机网页