Javascript 中的变量作用域和作用域链

野性酷女 2024-03-16 18:53 77阅读 0赞

在 Javascript 中，范围是指在运行时代码的特定部分中变量、函数和对象的可访问性或可见性。 了解范围的工作原理对于编写高效且无错误的 Javascript 代码至关重要。在这篇博文中，我们将探讨作用域和作用域链的概念以及详细的代码示例。

什么是变量作用域？  
变量作用域决定了变量和参数的可访问性和生命周期。Javascript 有两种主要类型的作用域：

全球范围  
本地范围  
全球范围  
可以从代码中的任何位置访问全局范围的变量，包括在函数内。这些是在任何函数之外定义的变量。考虑以下示例：

var message = 'Hello, I am globally available!';
    
    function printMessage() {
        
      console.log(message);
    }
    function showMessage() {
        
      alert(message)
    }
    
    printMessage(); // Output: Hello, I am globally available!
    showMessage(); // Output: alert will be displayed on the screen showing the text "Hello, I am globally available!"

在此示例中，变量在&函数message外定义，并且可以在函数内访问，因此具有全局作用域。printMessage()showMessage()message

本地范围  
在函数内声明的变量具有局部作用域，只能在该函数内访问。考虑以下示例：

function printMessage() {
        
      var message = 'Hello, World!';
      console.log(message);
    }
    
    printMessage(); // Output: Hello, World!
    console.log(message); // Error: message is not defined

你现在有想法了，对吧？该message变量在函数中声明printMessage()，无法在函数外部访问。因此，console.log(message)将抛出一个错误Uncaught ReferenceError: message is not defined

范围链  
如果我们在函数内部定义一个函数并在内部函数内部访问全局变量会怎样？是的，正如您所知，我们可以这样做，因为代码中的任何地方都可以使用全局变量，我们也可以在内部函数中访问它。

当一个变量被访问时，Javascript首先在当前作用域中搜索它，如果没有找到，它会向上移动作用域链，直到找到变量或到达全局作用域。

这种层次结构决定了 Javascript 查找变量的顺序，称为作用域链。简单的！

让我们用一个嵌套函数的例子来探索作用域链：

var globalVariable = "Hello"
    function outer() {
        
      var outerVariable = 'My';
    
      function inner() {
        
        var innerVariable = 'World';
        console.log(globalVariable + ' ' + outerVariable + ' ' + innerVariable);
      }
    
      inner(); // Output: Hello My World
    }
    
    outer();

在此示例中，inner()函数嵌套在outer()函数内部。内部函数可以访问globalVariable,outerVariable和innerVariable。调用时inner()，它首先检查globalVariable自己范围内的 。由于没有找到，它在函数的外部作用域中查找outer()，然后在全局作用域中找到它。一旦获得，它就会以相同的方式globalVariable检查变量。outerVariable最后它检查innerVariable哪个已经在它自己的范围内。最后记录连接的字符串。

使用 let & const 块作用域  
在 ECMAScript 6 (ES6) 之前，Javascript 只有函数作用域。然而，ES6 引入了带有letandconst关键字的块作用域。用let和声明的变量具有块作用域，这意味着它们只能在定义它们的const块 ( ) 内访问。\{\}

function printMessage() {
        
      if (true) {
        
        let message = 'Hey, Block!';
        console.log(message);
      }
    
      console.log(message); // Error: message is not defined
    }
    
    printMessage();

在此示例中，在块message内定义if并且只能在该块内访问。试图在块外访问它会导致错误。

提示与技巧  
正如我们所知，这var是一个函数作用域，如果使用不当，它会对您的代码产生一些奇怪的影响。考虑以下示例：

// 1. variable can be redeclared in the same scope!
    var message = "Hi";
    var message = "Hello"; 
    console.log(message) // Output : Hello
    
    // 2. var do not maintain the block scope. Can be changed outside of the block in whcih it was declared.
    if ( message ) {
        
        var newMessage = "Hey";
    }
    newMessage = "Bye";
    console.log(newMessage) // Output: Bye
    
    // 3. variables can be declared without using the var keyword
    greet = "My greetings";
    console.log(greet) // Output: My greetings

要避免使用关键字声明的变量的这种行为var，请改用let& const。var它们比阻塞范围更严格。

严格性：var < let < const

结论  
通过适当地管理作用域，您可以避免变量冲突、提高代码效率并确保您的代码按预期运行。因此，请务必掌握作用域的概念，并在您的 Javascript 项目中充分利用它。

关注我的博客，您将在其中获得提示、技巧和挑战，以保持您的技能敏锐。记得关注我哦！