作用域

Frontend SELF ZH
第 35 级 , 课程 4
可用

5.1 全局作用域

作用域 (scopes) 决定了变量和函数在程序不同部分的可访问性。在 JavaScript 中,有三种主要类型的作用域:全局、局部和块级。理解这些作用域对于有效管理数据和防止代码错误很重要。

全局作用域 包括所有在函数或代码块之外声明的变量和函数。这些变量和函数可以在代码中的任何地方访问。

示例 1: 声明全局变量

JavaScript
    
      var globalVar = 'I am a global variable';

      function showGlobalVar() {
        console.log(globalVar); // 访问全局变量
      }
      showGlobalVar(); // 输出:I am a global variable

      console.log(globalVar); // 访问全局变量
    
  

示例 2: 全局函数

在这个例子中,变量 globalVar 和函数 globalFunction() 在全局作用域中声明,可以在代码中的任何地方访问。

JavaScript
    
      function globalFunction() {
        return 'I am a global function';
      }

      console.log(globalFunction()); // 输出:I am a global function
    
  

5.2 局部作用域

局部作用域 包括在函数内声明的变量和函数。这些变量和函数只能在该函数内访问,在函数外部不可访问。

示例 3: 声明局部变量

在这个例子中,变量 localVar 在函数 localScopeExample() 内声明,不能在该函数外部访问:

JavaScript
    
      function localScopeExample() {
        var localVar = 'I am a local variable';
        console.log(localVar); // 访问局部变量
      }

      localScopeExample(); // 输出:I am a local variable

      console.log(localVar); // 错误: localVar 未定义
    
  

示例 4: 局部函数

在这个例子中,函数 innerFunction() 在函数 outerFunction() 内声明,在 outerFunction() 外不能访问:

JavaScript
    
      function outerFunction() {
        function innerFunction() {
          return 'I am a local function';
        }
        console.log(innerFunction()); // 访问局部函数
      }

      outerFunction(); // 输出:I am a local function

      console.log(innerFunction()); // 错误: innerFunction 未定义
    
  

5.3 块级作用域

块级作用域包括用 letconst 在代码块内声明的变量,由 {} 限定。这些变量仅能在该块内访问,块外无法访问。

示例 5: 用 let 声明变量

在这个例子中,变量 blockVarif 块内声明,不能在该块外部访问:

JavaScript
    
      if (true) {
        let blockVar = 'I am a block-scoped variable';
        console.log(blockVar); // 访问块级变量
      }

      console.log(blockVar); // 错误: blockVar 未定义
    
  

示例 6: 用 const 声明变量

在这个例子中,变量 ifor 块内声明,不能在该块外部访问:

JavaScript
    
      for (const i = 0; i < 3; i++) {
        console.log(i); // 访问块级变量
      }

      console.log(i); // 错误: i 未定义
    
  

块级作用域的特性

示例 7: 嵌套块

在这个例子中,变量 innerVar 只能在内部块内访问,变量 outerVar 可以在外部和内部块中访问:

JavaScript
    
      if (true) {
        let outerVar = 'I am in the outer block';

        if (true) {
          let innerVar = 'I am in the inner block';

          console.log(outerVar); // 访问外部块变量
          console.log(innerVar); // 访问内部块变量
        }

        console.log(outerVar); // 访问外部块变量
        console.log(innerVar); // 错误: innerVar 未定义
      }
    
  

5.4 不同作用域的交互

示例 8: 全局和局部作用域的交互

在这个例子中,函数 scopeExample() 可以访问全局变量 globalVar 和它的局部变量 localVar

JavaScript
    
      var globalVar = 'I am a global variable';

      function scopeExample() {
        var localVar = 'I am a local variable';

        console.log(globalVar); // 访问全局变量
        console.log(localVar);  // 访问局部变量
      }

      scopeExample(); // 输出:I am a global variable
                      //  I am a local variable

      console.log(globalVar); // 访问全局变量
      console.log(localVar);  // 错误: localVar 未定义
    
  

示例 9: 带箭头函数的作用域

在这个例子中,箭头函数 arrowFunction() 可以访问全局变量 globalVar 和它的局部变量 localVar

JavaScript
    
      let globalVar = 'I am a global variable';

      const arrowFunction = () => {
        let localVar = 'I am a local variable in arrow function';

        console.log(globalVar); // 访问全局变量
        console.log(localVar);  // 访问局部变量
      };

      arrowFunction(); // 输出:I am a global variable
                       // I am a local variable in arrow function

      console.log(globalVar); // 访问全局变量
      console.log(localVar);  // 错误: localVar 未定义
    
  
1
调查/小测验
函数第 35 级,课程 4
不可用
函数
函数
评论
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION