JavaScript中全局变量和局部变量是什么？

变量中包含可随时更改的数据或信息。JavaScript使用保留关键字var来声明变量。在JavaScript中，有两种类型的变量：全局变量和局部变量。那么JavaScript中全局变量和局部变量具体是什么？有什么用?下面本篇文章就来给大家介绍一下JavaScript中全局变量和局部变量，希望对大家有所帮助。

局部变量

使用JavaScript时，局部变量是在函数中定义的变量。它们具有局部范围，这意味着它们只能在定义它们的函数中使用。

由于局部变量是在函数内定义的，因此具有相同名称的变量可用于不同的函数。

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>

	<body> 
    <center> 
        <p>在myfunction()之外没有定义petName。</p> 
  
        <p id="demo1"></p> 
  
        <p id="demo2"></p> 
  
        <script> 
            myfunction(); 
  
            function myfunction() { 
                var petName = "Sizzer"; // local variabl 
                document.getElementById("demo1").innerHTML = "myfunction()函数内："+
                    typeof petName + " " + petName; 
            } 
  
            document.getElementById("demo2").innerHTML = "myfunction()函数外："+
                typeof petName; 
        </script> 
  </center> 
</body> 
</html>

上面的例子说明了局部变量的使用。但是，函数外部的语句不能引用名为petName的变量而不会导致错误。这是因为它具有局部范围。

全局变量

全局变量是在函数之外定义的变量。这些变量具有全局范围，因此任何函数都可以使用它们，而无需将它们作为参数传递给函数。

由于全局变量在函数外部定义，因此具有相同名称的变量不能用于不同的函数。网页上的所有脚本和功能都可以访问它。

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>

	<body> 
    <center> 
        <p>可以从任何脚本或函数访问全局变量。</p> 
  
        <p id="demo1"></p> 
  
        <p id="demo2"></p> 
  
        <script> 
            var petName = "Rocky";//global variable 
            myFunction(); 
  
            function myFunction() { 
                document.getElementById("demo1").innerHTML = 
                   "petName是： " + petName+ "- " +typeof petName; 
            } 
  
            document.getElementById("demo2").innerHTML = 
              "petName是： " + petName+ "- " +typeof petName; 
        </script> 
  </center> 
</body> 
</html>

在哪里使用哪些变量？

　●　尽管使用全局变量似乎比将数据传递给函数并从中返回数据更容易，但全局变量通常会产生问题。这是因为任何函数都可以修改全局变量，并且很容易拼错变量名或修改错误的变量，尤其是在大型应用程序中。反过来，这可能会产生调试问题。

　●　相反，局部变量的使用降低了命名冲突的可能性。例如，两个不同的函数可以对局部变量使用相同的名称而不会引起冲突。当然，这意味着更少的错误和调试问题。只有少数例外情况，应用程序中的所有代码都应该在函数中，因此所有变量都是本地的。

　●　如果拼错了已经声明的变量的名称，它将被视为新的全局变量。考虑到这一点，请确保在声明新变量时包含关键字，并在代码中引用变量之前始终声明变量。

注意：尽可能使用局部变量。在其他语句引用变量之前，始终使用var关键字声明新变量。

如何使用变量？

　●　变量或函数的范围决定了哪些代码可以访问它。

　●　在函数中创建的变量是局部变量，而局部变量只能由函数中的代码引用。

　●　函数外部创建的变量是全局变量，所有函数中的代码都可以访问所有全局变量。

　●　如果忘记在变量声明中编写var关键字，JavaScript引擎将假定该变量是全局的。这可能会导致调试问题。

　●　通常，将局部变量作为参数从一个函数传递到另一个函数比使用全局变量要好。这将使您的代码更容易理解，出错的几率更小。

链接: https://fly63.com/article/detial/7543

JavaScript中全局变量和局部变量是什么？

css自定义变量_初次接触CSS变量

CSS变量（自定义属性）实践指南

css变量_原生css 中变量的使用

理解var let const区别

一个例子，变量提升和函数提升就是这么简单！

CSS变量使用解析

let与var的区别，为什么要用let？

ES6-变量的解构赋值

JS中变量的存储

js 交换变量值的方法总汇