📜  了解 JavaScript 中的变量作用域

📅  最后修改于: 2021-10-22 02:55:04             🧑  作者: Mango

在 JavaScript 中,有两种类型的作用域

  1. 全局范围– 附加到窗口的最外层函数之外的范围。
  2. 本地作用域——在正在执行的函数内部。

让我们看看下面的代码。我们在全局作用域的第一行定义了一个全局变量。然后我们在函数fun() 中定义了一个局部变量。

let globalLet = "This is a global variable";
   
function fun() {
  let localLet = "This is a local variable";
   
  console.log(globalLet); // This is a global variable
  console.log(localLet); // This is a local variable
}
fun();

输出:

当我们执行函数fun() 时,输出显示全局变量和局部变量都可以在函数内部访问,因为我们可以通过 console.log 记录它们。这表明在函数内部我们可以访问全局变量(在函数外部声明)和局部变量(在函数内部声明)。让我们将 console.log 语句移到函数之外,并在调用函数之后放置它们。

let globalLet = "This is a global variable";
   
function fun() {
  let localLet = "This is a local variable";
   
}
fun();
  console.log(globalLet); // This is a global variable
  console.log(localLet); // localLet is not defined

输出:

我们仍然可以看到全局变量的值,但是对于局部变量 console.log 会抛出一个错误。这是因为现在 console.log 语句存在于全局范围内,它们可以访问全局变量但不能访问局部变量。

注意事项:无论何时声明变量,始终使用前缀 let。如果不使用 let 关键字,则默认情况下在全局范围内创建变量。例如,在上面的示例中,我们只需删除 localLet 声明之前的关键字 let。

let globalLet = "This is a global variable";
   
function fun() {
   localLet = "This is a local variable";
}
   
fun();
  console.log(globalLet); // This is a global variable
  console.log(localLet); // This is a local variable

输出:

我们现在也可以使用 console.log 记录局部变量,因为 localLet 是在全局范围内创建的,因为我们在声明它时错过了关键字 let。真正发生的是,由于我们没有使用 let 关键字,JavaScript 首先在本地范围内搜索 localLet,然后在全局范围内搜索。由于该名称没有现有的全局变量,因此它创建了一个新的全局变量。
面试中问得最多的问题之一是全局变量和局部变量具有相同名称的场景。让我们看看接下来会发生什么。

let globalLet = "This is a global variable";
   
function fun() {
  let globalLet = "This is a local variable";
}
fun();
console.log(globalLet); // This is a global variable

输出:

在这个例子中,我们声明了一个局部变量和全局变量“globalLet”。这里重要的是我们访问它的范围。在上面的例子中,我们在全局范围内访问它,因此它将输出全局变量,因为局部变量不在其范围内。让我们将 console.log 语句移到函数fun() 中。

let globalLet = "This is a global variable";
   
function fun() {
  let globalLet = "This is a local variable";
  console.log(globalLet); // This is a local variable
}
fun();

输出:

在函数fun() 中,可以访问局部变量和全局变量。但是当我们 console.log 变量 globalLet 时,首先 JavaScript 会尝试在当前范围内查找局部变量。它找到局部变量并输出它。否则它会在外部作用域(在这种情况下是全局作用域)中搜索变量“globalLet”。

如果我们想在这里访问全局变量而不是本地变量怎么办。好吧,窗口对象来救我们了。所有全局变量都附加到 window 对象,因此我们可以访问全局变量名称,如下面的示例所示。

let globalLet = "This is a global variable";
   
function fun() {
  let globalLet = "This is a local variable";
  console.log(window.globalLet); // This is a global variable
}
fun();

输出:

在讨论了 JavaScript 中的作用域之后,猜测下面代码片段的输出应该是小菜一碟。

function fun(){
    function fun2(){
         i = 100;
    }
    fun2();
    console.log(i); // 100
}
fun(); 

输出:

function fun(){
    function fun2(){
        let i = 100;
    }
    fun2();
    console.log(i); // i is not defined 
}
fun();

输出:

在第一个例子中,因为我们没有使用关键字 let,变量“i”被假定在全局范围内声明,因此输出是 100。在第二个例子中,“i”变成了一个局部变量,因此不是可在该函数范围之外访问。

让我们再看一个例子——

function fun(){
    if(true){
        let i = 100;
    }
    console.log(i); // i is not defined
}
fun();

输出:

在 ES2015 之后,我们开始使用 let 而不是 var 来声明变量,现在 if 块也被算作块作用域,因此在上面的例子中,我们得到一个错误而不是值 100。如果我们将 let 更改为 var 我们将获得 100 作为输出,就好像块之前不被视为块作用域,只有函数被视为。

关于作者:

“Harshit 是一名技术爱好者,对编程有着浓厚的兴趣。他拥有技术学士学位。在诺伊达 JIIT 获得计算机科学学位,目前在 SAP 担任前端开发人员。他还是国家级乒乓球运动员。除此之外,他喜欢通过看电影和英语情景喜剧来放松。他在德里工作,您可以通过 https://in.linkedin.com/pub/harshit-jain/2a/129/bb5 与他联系

如果您还想在这里展示您的博客,请参阅 GBlog,了解 GeeksforGeeks 上的客座博客写作。